<template>
	<div>
		<Drawer :value="visible" :styles="{ padding: '0 0 60px' }" width="1000" @on-visible-change="drawerChange">
			<div class="drawer-main">
				<div class="header">
					<Icon custom="iconfont iconmanjianmanzhe" size="60" />
					<div>
						<div class="title">{{ formValidate.store_name }}</div>
						<div>Product ID：{{ productId }}</div>
					</div>
				</div>
				<Tabs v-model="currentTab" @on-click="onhangeTab">
					<TabPane v-for="(item, index) in headTab" :key="index" :label="item.title" :name="item.name">
					</TabPane>
				</Tabs>
				<Form class="formValidate" ref="formValidate" :rules="ruleValidate" :model="formValidate"
					:label-width="labelWidth" :label-position="labelPosition" :disabled="!!pid" @submit.native.prevent>
					<Row type="flex" v-show="currentTab === '1'">
						<!-- 商品信息-->
						<Col span="24">
						<FormItem :label="$t('page.product.title')+'：'">
							<!--                <p>{{formValidate.store_name}}</p>-->
							<Input disabled v-model="formValidate.store_name" v-width="'50%'" />
						</FormItem>
						</Col>
						<Col span="24">
						<FormItem :label="$t('page.product.category')+'：'">
							<el-cascader disabled v-width="'50%'" size="mini" v-model="formValidate.cate_id"
								:options="treeSelect" :props="props" filterable clearable :disabled="!!pid">
							</el-cascader>
						</FormItem>
						</Col>
						<Col span="24" class="brandName">
						<FormItem :label="$t('page.product.brand')+'：'">
							<Cascader :data="brandData" change-on-select disabled v-model="formValidate.brand_id"
								filterable v-width="'50%'"></Cascader>
						</FormItem>
						</Col>
						<Col span="24">
						<FormItem :label="$t('page.product.MPN')+'：'" prop="mpn">
							<Input v-model="formValidate.mpn" :placeholder="$t('page.product.please_input_the_MPN')"
								v-width="'50%'" />
						</FormItem>
						</Col>
						<!--            <Col span="24">-->
						<!--              <FormItem label="商品标签：" class="labelClass">-->
						<!--                <div class="acea-row row-middle">-->
						<!--                  <div-->
						<!--                    class="labelInput acea-row row-between-wrapper"-->
						<!--                    @click="openStoreLabel"-->
						<!--                  >-->
						<!--                    <div style="width: 90%">-->
						<!--                      <div v-if="storeDataLabel.length">-->
						<!--                        <Tag-->
						<!--                          closable-->
						<!--                          v-for="item in storeDataLabel"-->
						<!--                          :key="item.id"-->
						<!--                          @on-close="closeStoreLabel(item)"-->
						<!--                          >{{ item.label_name }}</Tag-->
						<!--                        >-->
						<!--                      </div>-->
						<!--                      <span class="span" v-else>选择商品标签</span>-->
						<!--                    </div>-->
						<!--                    <div class="iconfont iconxiayi"></div>-->
						<!--                  </div>-->
						<!--                </div>-->
						<!--              </FormItem>-->
						<!--            </Col>-->

						<Col span="24" class="product_size">
						<FormItem :label="$t('page.product.product_dimensions')+'：'" prop="size">
							<table style="border-collapse: collapse;text-align: center;" width="50%"
								border="1px solid #dcdee2">
								<tr>
									<td>{{$t('page.product.length')}}</td>
									<td>{{$t('page.product.width')}}</td>
									<td>{{$t('page.product.height')}}</td>
									<td></td>
								</tr>
								<tr>
									<td width="25%">
										<Input v-model="formValidate.size_data.long" />
									</td>
									<td width="25%">
										<Input v-model="formValidate.size_data.width" />
									</td>
									<td width="25%">
										<Input v-model="formValidate.size_data.height" />
									</td>
									<td>
										<Input v-model="formValidate.size_data.unit" value="cm" disabled />

									</td>
								</tr>
							</table>
						</FormItem>
						</Col>
						<Col span="24">
						<FormItem :label="$t('page.product.attribute')+'：'" prop="">
							<el-tooltip placement="top">
								<div slot="content">
									{{$t('page.product.attribute_describe1')}} </br>
									{{$t('page.product.attribute_describe2')}} </br>
									{{$t('page.product.attribute_describe3')}} </br>
									{{$t('page.product.attribute_describe4')}}
								</div>
								<i class="el-icon-question help-icon"></i>
							</el-tooltip>
							<Col span="24">
							<FormItem v-if="formValidate.attr_data.length !== 0">
								<draggable class="dragArea list-group" :list="formValidate.attr_data" group="peoples"
									handle=".move-icon" :move="checkMove" @end="end">
									<div v-for="(item, index) in formValidate.attr_data" :key="index"
										class="acea-row row-middle mb10">
		
										<div style="width: 90%" :class="moveIndex === index ? 'borderStyle' : ''">
											<div class="acea-row row-middle">

												<Input v-model="item.name"
													:placeholder="$t('page.product.please_input_the_name')" class="mr5"
													v-width="'25%'" @input="handleAttrChange(index, 'name', $event)" />


												<Input v-model="item.value"
													:placeholder="$t('page.product.please_input_the_value')" class="mr5"
													v-width="'25%'" @input="handleAttrChange(index, 'value', $event)" />

												<Icon type="ios-close-circle" size="14" class="curs"
													@click="removeAttrData(index)" />
											</div>
										</div>

									</div>
								</draggable>
							</FormItem>
							</Col>
						</FormItem>
						</Col>

						<Col span="24">
						<FormItem :label="$t('page.product.main_images')+'：'">
							<!-- <div class="acea-row">
								<div class="pictrue" v-for="(item, index) in formValidate.slider_image" :key="index"
									draggable="true" @dragstart="handleDragStart($event, item)"
									@dragover.prevent="handleDragOver($event, item)"
									@dragenter="handleDragEnter($event, item)" @dragend="handleDragEnd($event, item)">
									<img v-lazy="item" />
								</div>
								<Input v-model="formValidate.slider_image[0]" class="input-display"></Input>
							</div> -->
				<div class="acea-row">
			      <div
			        class="pictrue"
			        v-for="(item, index) in formValidate.slider_image"
			        :key="index"
			        draggable="true"
			        @dragstart="handleDragStart($event, item)"
			        @dragover.prevent="handleDragOver($event, item)"
			        @dragenter="handleDragEnter($event, item)"
			        @dragend="handleDragEnd($event, item)"
			      >
			        <!-- 为 img 标签添加点击事件 -->
			        <img 
			          v-lazy="item" 
			          @click="handleImageClick(index)"
			          style="cursor: pointer;"
			        />
			        <Button
			          shape="circle"
			          icon="md-close"
			          @click.native="handleRemove(index)"
			          class="btndel"
			        ></Button>
			      </div>
			      <div
			        v-if="formValidate.slider_image.length < 10"
			        class="upLoad acea-row row-center-wrapper"
			        @click="modalPicTap('duo')"
			      >
			        <Icon type="ios-camera-outline" size="26" />
			      </div>
			      <Input
			        v-model="formValidate.slider_image[0]"
			        class="input-display"
			      ></Input>
			    </div>
						</FormItem>
						</Col>
						<Col span="24" v-if="formValidate.video_open">
						<FormItem label="Video Type：">
							<RadioGroup v-model="seletVideo" disabled @on-change="changeVideo">
								<Radio :label="0" class="radio">Local Video</Radio>
								<Radio :label="1">Video Link</Radio>
							</RadioGroup>
						</FormItem>
						</Col>
						<Col span="24" v-if="formValidate.video_open">
						<FormItem label="">
							<Input disabled v-if="seletVideo == 1 && !formValidate.video_link" v-width="'50%'"
								v-model="videoLink" placeholder="Please enter the video link" />
							<input disabled type="file" ref="refid" @change="zh_uploadFile_change"
								class="input-display" />
							<div v-if="
                    seletVideo == 0 &&
                    (upload_type !== '1' || videoLink) &&
                    !formValidate.video_link
                  " class="ml10 videbox" @click="zh_uploadFile">
								+
							</div>
							<Button v-if="
                    seletVideo == 1 &&
                    (upload_type !== '1' || videoLink) &&
                    !formValidate.video_link
                  " type="primary" icon="ios-cloud-upload-outline" class="uploadVideo"
								@click="zh_uploadFile">Add</Button>
							<Upload v-if="upload_type === '1' && !videoLink" :show-upload-list="false"
								:action="fileUrl2" :before-upload="videoSaveToUrl" :data="uploadData" :headers="header"
								:multiple="true" style="display: inline-block">
								<div v-if="seletVideo === 0 && !formValidate.video_link" class="videbox">
									+
								</div>
							</Upload>
							<div class="iview-video-style" v-if="formValidate.video_link">
								<video class="video-style" :src="formValidate.video_link" controls="controls">
									Your browser does not support video tags.
								</video>
								<div class="mark"></div>
								<Icon type="ios-trash-outline" class="iconv" @click="delVideo" />
							</div>
							<Progress class="progress" :percent="progress" :stroke-width="5"
								v-if="upload.videoIng || videoIng" />
							<div class="tips">Suggested duration: 9-30 seconds, video aspect ratio 16:9</div>
						</FormItem>
						</Col>

					</Row>
					<Row type="flex" v-show="currentTab === '2'">
						<Col span="24">
						<FormItem :label="$t('page.product.specifactions')+'：'" props="spec_type">
							<RadioGroup disabled v-model="formValidate.spec_type" @on-change="changeSpec">
								<Radio disabled :label="0" class="radio">{{$t('page.product.single_specification')}}
								</Radio>
								<Radio disabled :label="1">{{$t('page.product.multiple_specifications')}}</Radio>
							</RadioGroup>
						</FormItem>
						</Col>
						<!-- 多规格添加-->
						<Col span="24" v-if="formValidate.spec_type === 1" class="noForm">
						<Col span="24">
						<FormItem :label="$t('page.product.specifications')+'：'">
							<div class="acea-row row-middle">
								<Select disabled v-model="formValidate.selectRule" style="width: 23%">
									<Option v-for="(item, index) in ruleList" :value="item.rule_name" :key="index">
										{{ item.rule_name }}</Option>
								</Select>
								<!--                    <Button type="primary" class="mr20" @click="confirm"-->
								<!--                      >{{$t('page.product.confirm')}}</Button-->
								<!--                    >-->
								<!--                    <Button @click="addRule">{{$t('page.product.add_specifications')}}</Button>-->
							</div>
						</FormItem>
						</Col>
						<Col span="24">
						<FormItem v-if="attrs.length !== 0">
							<draggable class="dragArea list-group" :list="attrs" group="peoples" handle=".move-icon"
								:move="checkMove" @end="end">
								<div v-for="(item, index) in attrs" :key="index" class="acea-row row-middle mb10">
									<div class="move-icon">
										<span class="iconfont icondrag2"></span>
									</div>
									<div style="width: 90%" :class="moveIndex === index ? 'borderStyle' : ''">
										<div class="acea-row row-middle">
											<span class="mr5">{{ item.value }}</span>
											<Icon type="ios-close-circle" size="14" class="curs"
												@click="handleRemoveRole(index)" />
										</div>
										<div class="rulesBox">
											<draggable :list="item.detail" handle=".drag">
												<Tag type="dot" closable color="primary"
													v-for="(j, indexn) in item.detail" :key="indexn" :name="j"
													class="mr20 drag" @on-close="handleRemove2(item.detail, indexn)">
													{{ j }}</Tag>
											</draggable>
											<!--                          <Input-->
											<!--                            search-->
											<!--                            enter-button="添加"-->
											<!--                            placeholder="Please Enter The Attribute Name"-->
											<!--                            v-model="item.detail.attrsVal"-->
											<!--                            @on-search="createAttr(item.detail.attrsVal, index)"-->
											<!--                            class="width-add"-->
											<!--                          />-->
										</div>
									</div>
								</div>
							</draggable>
						</FormItem>
						</Col>
						<Col span="24" v-if="createBnt">
						<FormItem>
							<!--                  <Button-->
							<!--                    type="primary"-->
							<!--                    icon="md-add"-->
							<!--                    @click="addBtn"-->
							<!--                    class="mr15"-->
							<!--                    >{{$t('page.product.add_new_specifications')}}</Button-->
							<!--                  >-->
							<!--                  <Button type="success" @click="generate(1)">{{$t('page.product.submit')}}</Button>-->
						</FormItem>
						</Col>
						<Col span="24" v-if="showIput">
						<Col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
						<FormItem :label="$t('page.product.specifactions')+'：'">
							<Input disabled v-model="formDynamic.attrsName" />
						</FormItem>
						</Col>
						<Col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
						<FormItem :label="$t('page.product.spec_value')+'：'">
							<Input disabled v-model="formDynamic.attrsVal" />
						</FormItem>
						</Col>
						<Col :xl="6" :lg="5" :md="10" :sm="24" :xs="24">
						<FormItem>
							<Button type="primary" class="mr15"
								@click="createAttrName">{{$t('page.product.confirm')}}</Button>
							<Button @click="offAttrName">{{$t('page.product.cancel')}}</Button>
						</FormItem>
						</Col>
						</Col>
						<!-- 多规格设置-->
						<Col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" v-if="
                  manyFormValidate.length &&
                  formValidate.header.length !== 0 &&
                  attrs.length !== 0
                ">
						<!-- 批量设置-->
						<Col span="24">
						<FormItem :label="$t('page.product.batch_settings')+'：'" class="labeltop">
							<Table :data="oneFormBatch" :columns="
                        formValidate.product_type == 1
                          ? columnsCarMy
                          : formValidate.product_type == 3
                          ? columnsFictitious
                          : columns2
                      " border>
								<template slot-scope="{ row, index }" slot="attr">
									<div @click="batchAttr" class="acea-row row-between-wrapper"
										style="cursor: pointer">
										<div style="width: 41px">
											{{ oneFormBatch[0].attr }}
										</div>
										<span class="iconfont icondrop-down"></span>
									</div>
								</template>
								<template slot-scope="{ row, index }" slot="pic">
									<div class="acea-row row-middle row-center-wrapper"
										@click="modalPicTap('dan', 'duopi', index)">
										<div class="pictrue pictrueTab" v-if="oneFormBatch[0].pic">
											<img v-lazy="oneFormBatch[0].pic" />
										</div>
										<div class="
                              upLoad
                              pictrueTab
                              acea-row
                              row-center-wrapper
                            " v-else>
											<Icon type="ios-camera-outline" size="26" class="iosfont" />
										</div>
									</div>
								</template>
								<template slot-scope="{ row, index }" slot="price">
									<InputNumber disabled v-model="oneFormBatch[0].price" :min="0" class="priceBox">
									</InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="settle_price">
									<InputNumber disabled v-model="oneFormBatch[0].settle_price" :min="0"
										class="priceBox"></InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="discount">
									<InputNumber disabled v-model="oneFormBatch[0].discount" :min="0" class="priceBox">
									</InputNumber>
								</template>
								<!--                      <template slot-scope="{ row, index }" slot="cost">-->
								<!--                        <InputNumber-->
								<!--                          v-model="oneFormBatch[0].cost"-->
								<!--                          :min="0"-->
								<!--                          class="priceBox"-->
								<!--                        ></InputNumber>-->
								<!--                      </template>-->
								<template slot-scope="{ row, index }" slot="ot_price">
									<InputNumber disabled v-model="oneFormBatch[0].ot_price" :min="0" class="priceBox">
									</InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="parcel_num">
									<InputNumber disabled v-model="oneFormBatch[0].parcel_num" :min="0"
										class="priceBox"></InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="stock">
									<InputNumber disabled v-model="oneFormBatch[0].stock" :min="0"
										:disabled="formValidate.product_type == 1 || openErp" class="priceBox">
									</InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="bar_code">
									<Input disabled v-model="oneFormBatch[0].bar_code"></Input>
								</template>
								<template slot-scope="{ row, index }" slot="code">
									<Input disabled v-model="oneFormBatch[0].code"></Input>
								</template>
								<template slot-scope="{ row, index }" slot="weight">
									<InputNumber disabled v-model="oneFormBatch[0].weight" :step="0.1" :min="0"
										class="priceBox"></InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="volume">
									<InputNumber disabled v-model="oneFormBatch[0].volume" :step="0.1" :min="0"
										class="priceBox"></InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="fictitious"
									v-if="formValidate.product_type == 1">
									<Button v-if="!row.virtual_list && !row.stock"
										@click="addVirtual(0, 'oneFormBatch')">Add Card Password</Button>
									<span v-else class="seeCatMy" @click="
                            seeVirtual(oneFormBatch[0], 'oneFormBatch', 0)
                          ">{{$t('page.product.already_set')}}</span>
								</template>
								<template slot-scope="{ row, index }" slot="action">
									<a @click="batchAdd">{{$t('page.product.batch_settings')}}</a>
									<Divider type="vertical" />
									<a @click="batchDel">{{$t('page.product.clear')}}</a>
								</template>
							</Table>
						</FormItem>
						</Col>
						<!-- 多规格表格-->
						<Col span="24">
						<FormItem :label="$t('page.product.specifications')+'：'" class="labeltop">
							<Table :data="manyFormValidate" :columns="translatedColumns" border>
								<template slot-scope="{ row, index }" v-for="(item, i) in attrData.length"
									:slot="'value' + (i + 1)">
									<div :class="
                            manyFormValidate[index].select ? 'selectOn' : ''
                          ">
										{{ manyFormValidate[index]['value' + (i + 1)] }}
									</div>
								</template>
								<template slot-scope="{ row, index }" slot="pic">
									<div class="acea-row row-middle row-center-wrapper"
										@click="modalPicTap('dan', 'duoTable', index)">
										<div class="pictrue pictrueTab" v-if="manyFormValidate[index].pic">
											<img v-lazy="manyFormValidate[index].pic" />
										</div>
										<div class="
                              upLoad
                              pictrueTab
                              acea-row
                              row-center-wrapper
                            " v-else>
											<Icon type="ios-camera-outline" size="21" />
										</div>
									</div>
								</template>
								<template slot-scope="{ row, index }" slot="price">
									<InputNumber disabled v-model="manyFormValidate[index].price" :min="0"
										class="priceBox"></InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="settle_price">
									<InputNumber disabled v-model="manyFormValidate[index].settle_price" :min="0"
										class="priceBox"></InputNumber>
								</template>

								<template slot-scope="{ row, index }" slot="ot_price">
									<InputNumber disabled v-model="manyFormValidate[index].ot_price" :min="0"
										class="priceBox"></InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="parcel_num">
									<InputNumber disabled v-model="manyFormValidate[index].parcel_num" :min="0"
										class="priceBox"></InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="discount">
									<InputNumber disabled v-model="manyFormValidate[index].discount" :min="0"
										class="priceBox"></InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="stock">
									<InputNumber disabled v-model="manyFormValidate[index].stock" :min="0"
										:precision="0" :disabled="formValidate.product_type == 1 || openErp"
										class="priceBox"></InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="bar_code">
									<Input disabled v-model="manyFormValidate[index].bar_code"></Input>
								</template>
								<template slot-scope="{ row, index }" slot="code">
									<Input disabled v-model="manyFormValidate[index].code"></Input>
								</template>
								<template slot-scope="{ row, index }" slot="weight">
									<InputNumber disabled v-model="manyFormValidate[index].weight" :min="0"
										class="priceBox"></InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="volume">
									<InputNumber disabled v-model="manyFormValidate[index].volume" :min="0"
										class="priceBox"></InputNumber>
								</template>
								<template slot-scope="{ row, index }" slot="fictitious">
									<Button
										v-if="(!manyFormValidate[index].parcel_list || !manyFormValidate[index].parcel_list.length)"
										@click="addParcel(index)">{{$t('page.product.add_package')}}
									</Button>
									<span v-else class="seeCatMy"
										@click="addParcel(index)">{{$t('page.product.already_set')}}</span>
								</template>
								<template slot-scope="{ row, index }" slot="action">
									<a @click="delAttrTable(index)">{{$t('page.product.already_set')}}</a>
								</template>
							</Table>
						</FormItem>
						</Col>
						</Col>
						</Col>
						<!-- 单规格表格-->
						<div v-if="formValidate.spec_type === 0" style="width: 100%">
							<Col span="24">
							<FormItem :label="$t('page.product.image')+'：'">
								<div class="pictrueBox" @click="modalPicTap('dan', 'danTable', 0)">
									<div class="pictrue" v-if="oneFormValidate[0].pic">
										<img v-lazy="oneFormValidate[0].pic" />
									</div>
									<div class="upLoad acea-row row-center-wrapper" v-else>
										<Input v-model="oneFormValidate[0].pic" class="input-display"></Input>
										<Icon type="ios-camera-outline" size="26" />
									</div>
								</div>
							</FormItem>
							</Col>
							<Col span="24" class="asterisk">
							<FormItem :label="$t('page.product.wholesale_price')+'：'">
								<InputNumber disabled v-model="oneFormValidate[0].price" :min="0" :max="99999999"
									v-width="'50%'"></InputNumber>
							</FormItem>
							</Col>
							<!--			  <Col span="24" class="asterisk">-->
							<!--			    <FormItem label="结算价：">-->
							<!--			      <InputNumber-->
							<!--			          v-model="oneFormValidate[0].settle_price"-->
							<!--			          :min="0"-->
							<!--			          :max="99999999"-->
							<!--			          v-width="'50%'"-->
							<!--			      ></InputNumber>-->
							<!--			    </FormItem>-->
							<!--			  </Col>-->
							<!--              <Col span="24" class="asterisk">-->
							<!--                <FormItem label="成本价：">-->
							<!--                  <InputNumber-->
							<!--                    v-model="oneFormValidate[0].cost"-->
							<!--                    :min="0"-->
							<!--                    :max="99999999"-->
							<!--                    v-width="'50%'"-->
							<!--                  ></InputNumber>-->
							<!--                </FormItem>-->
							<!--              </Col>-->
							<Col span="24">
							<FormItem :label="$t('page.product.original_price')+'：'">
								<InputNumber disabled v-model="oneFormValidate[0].ot_price" :min="0" :max="99999999"
									v-width="'50%'"></InputNumber>
							</FormItem>
							</Col>
							<!--              <Col span="24" class="asterisk">-->
							<!--                <FormItem label="库存：">-->
							<!--                  <InputNumber-->
							<!--                    v-model="oneFormValidate[0].stock"-->
							<!--                    :min="0"-->
							<!--                    :max="99999999"-->
							<!--                    :disabled="formValidate.product_type == 1 || openErp"-->
							<!--                    :precision="0"-->
							<!--                    v-width="'50%'"-->
							<!--                  ></InputNumber>-->
							<!--                </FormItem>-->
							<!--              </Col>-->
							<Col span="24" class="asterisk">
							<div class="asteriskInfo on">*</div>
							<FormItem :label="$t('page.order.discount')+'：'">
								<InputNumber disabled v-model="oneFormValidate[0].discount" :min="0" :max="100"
									v-width="'50%'"></InputNumber>
							</FormItem>
							</Col>
							<!--              <Col span="24">-->
							<!--                <FormItem label="商品条形码：">-->
							<!--                  <Input-->
							<!--                    v-model.trim="oneFormValidate[0].bar_code"-->
							<!--                    v-width="'50%'"-->
							<!--                    placeholder="请输入商品条形码"-->
							<!--                  ></Input>-->
							<!--                </FormItem>-->
							<!--              </Col>-->
							<Col span="24">
							<FormItem :label="$t('page.product.SKU')+'：'">
								<Input disabled v-model.trim="oneFormValidate[0].code" v-width="'50%'"></Input>
							</FormItem>
							</Col>
							<Col span="24">
							<FormItem :label="$t('page.product.package')+'：'">
								<Table :data="oneFormValidate[0].parcel_list" :columns="parcelColumns" border>
									<template slot-scope="{ row, index }" slot="num">
										<Input disabled v-model="row.num" v-width="'50%'"></Input>
									</template>
									<template slot-scope="{ row, index }" slot="length">
										<InputNumber v-model="row.length" :min="0" disabled class="priceBox">
										</InputNumber>
									</template>

									<template slot-scope="{ row, index }" slot="width">
										<InputNumber v-model="row.width" :min="0" disabled class="priceBox">
										</InputNumber>
									</template>

									<template slot-scope="{ row, index }" slot="height">
										<InputNumber v-model="row.height" :min="0" disabled class="priceBox">
										</InputNumber>
									</template>

									<template slot-scope="{ row, index }" slot="weight">
										<InputNumber v-model="row.weight" :min="0" disabled class="priceBox">
										</InputNumber>
									</template>
								</Table>
							</FormItem>
							</Col>
							<Col span="24" v-if="formValidate.product_type == 0">
							<FormItem label="Weight（KG）：">
								<InputNumber disabled v-model="oneFormValidate[0].weight" :min="0" :max="99999999"
									v-width="'50%'"></InputNumber>
							</FormItem>
							</Col>
							<Col span="24" v-if="formValidate.product_type == 0">
							<FormItem label="Volume(m³)：">
								<InputNumber disabled v-model="oneFormValidate[0].volume" :min="0" :max="99999999"
									v-width="'50%'"></InputNumber>
							</FormItem>
							</Col>
							<Col span="24" v-if="formValidate.product_type == 1">
							<FormItem label="Password Setting：">
								<Button v-if="
                      !oneFormValidate[0].virtual_list.length &&
                      !oneFormValidate[0].stock
                    " @click="addVirtual(0, 'oneFormValidate')">Add Card Password</Button>
								<span v-else class="seeCatMy" @click="
                      seeVirtual(oneFormValidate[0], 'oneFormValidate', 0)
                    ">Already Set</span>
							</FormItem>
							</Col>
						</div>
					</Row>
					<!-- 商品详情 -->
					<Row v-show="currentTab === '3'" class="mb10">
						<Col span="24" class="asterisk">

						<FormItem>

						</FormItem>
						<FormItem :label="$t('page.product.product_features_title')+'：'" class="vertical-layout">
							<div class="tips" id="description-tip">
								{{$t('page.product.product_features1')}}
								<!-- 1. Features should include the following: key words, functionalities, and distinct features that will help the product stand out. -->
								<br />
								{{$t('page.product.product_features2')}}
								<!-- 2. For images and other details, please put them in [Detailed Description]. -->
								<br />
								{{$t('page.product.product_features3')}}
								<!-- 3. Minimum four features are required, and minimum 50 characters each for the first four features. Chinese characters are not allowed. -->
								<br />
								{{$t('page.product.product_features4')}}
								<!-- 4. DO NOT put any information unrelated to product features and descriptions here, such as after-sales support, warranty period, promotional messages, specific carriers, personal contact info, SRP, etc. -->
							</div>
							<p v-for="(item, index) in formValidate.features" :key="index" style="margin-bottom: 10px;">
								<Input v-model="formValidate.features[index]" v-width="'50%'" style="margin-right: 5px;"
									maxlength="500" show-word-limit />

							</p>
							<!-- <a @click="addFeatures()" icon="md-add">+ {{$t('page.product.add_more')}}</a> -->
						</FormItem>
						</Col>
						<Col span="22" offset="1">
						<wangeditor ref="wangeditor" style="width: 100%" :content="contents"
							@editorContent="getEditorContent"></wangeditor>
						</Col>
						<!-- <Col span="6" style="width: 33%">
            <div class="ifam">
              <div class="content" v-html="content"></div>
            </div>
          </Col> -->
					</Row>
					<!-- 其他设置-->
					<Row v-show="currentTab === '4'">
						<!--            <Col span="24">-->
						<!--              <FormItem label="商品关键字：" prop="">-->
						<!--                <Input-->
						<!--                    v-model="formValidate.keyword"-->
						<!--                    placeholder="请输入商品关键字"-->
						<!--                    v-width="'50%'"-->
						<!--                />-->
						<!--              </FormItem>-->
						<!--            </Col>-->
						<Col span="24">
						<FormItem :label="$t('page.product.product_parameter')">
							<Input disabled v-model="formValidate.store_info" type="textarea" :rows="3"
								:placeholder="$t('page.product.please_parameters')" v-width="'50%'" />
						</FormItem>
						</Col>
						<!--            <Col span="24">-->
						<!--              <FormItem label="商品推荐图：">-->
						<!--                <div-->
						<!--                  class="pictrueBox"-->
						<!--                  @click="modalPicTap('dan', 'recommend_image')"-->
						<!--                >-->
						<!--                  <div class="pictrue" v-if="formValidate.recommend_image">-->
						<!--                    <img v-lazy="formValidate.recommend_image" />-->
						<!--                    <Input-->
						<!--                      v-model="formValidate.recommend_image"-->
						<!--                      class="input-display"-->
						<!--                    ></Input>-->
						<!--                  </div>-->
						<!--                  <div class="upLoad acea-row row-center-wrapper" v-else>-->
						<!--                    <Input-->
						<!--                      v-model="formValidate.recommend_image"-->
						<!--                      class="input-display"-->
						<!--                    ></Input>-->
						<!--                    <Icon type="ios-camera-outline" size="26" />-->
						<!--                  </div>-->
						<!--                </div>-->
						<!--                <div class="tips">(建议图片比例5:2)</div>-->
						<!--              </FormItem>-->
						<!--            </Col>-->
						<!--            <Col span="24">-->
						<!--              <FormItem label="商品参数：">-->
						<!--                <Select-->
						<!--                  v-model="formValidate.specs_id"-->
						<!--                  clearable-->
						<!--                  filterable-->
						<!--                  v-width="'50%'"-->
						<!--                  placeholder="请输入商品参数"-->
						<!--                  @on-change="specsInfo"-->
						<!--                >-->
						<!--                  <Option-->
						<!--                    v-for="(item, index) in specsData"-->
						<!--                    :value="item.id"-->
						<!--                    :key="index"-->
						<!--                    >{{ item.name }}</Option-->
						<!--                  >-->
						<!--                </Select>-->
						<!--              </FormItem>-->
						<!--            </Col>-->
						<!--            <Col span="24" v-if="formValidate.specs_id">-->
						<!--              <FormItem label="" props="">-->
						<!--                <Table-->
						<!--                  border-->
						<!--                  :columns="specsColumns"-->
						<!--                  :data="specsList"-->
						<!--                  ref="table"-->
						<!--                  class="specsList"-->
						<!--                  width="700"-->
						<!--                >-->
						<!--                  <template slot-scope="{ row, index }" slot="action">-->
						<!--                    <a @click="delSpecs(index)" v-if="index > 0">删除</a>-->
						<!--                  </template>-->
						<!--                </Table>-->
						<!--                <Button class="mt20" @click="addSpecs">添加参数</Button>-->
						<!--              </FormItem>-->
						<!--            </Col>-->
					</Row>
					<!-- 商品评论 -->
					<Row v-show="currentTab === '5'">
						<Col span="22" offset="1">
						<Table ref="table" :columns="replyColumns" :data="replyData" class="ivu-mt"
							:loading="replyLoading" no-data-text="No data available at the moment"
							no-filtered-data-text="No filtering results available at the moment">
							<template slot-scope="{ row }" slot="info">
								<div class="imgPic acea-row row-middle">
									<viewer>
										<div class="pictrue"><img v-lazy="row.image" /></div>
									</viewer>
									<div class="info">{{ row.store_name }}</div>
								</div>
							</template>
							<template slot-scope="{ row }" slot="content">
								<div class="mb5 content_font">{{ row.comment }}</div>
								<viewer>
									<div class="pictrue mr10" v-for="(item, index) in row.pics || []" :key="index">
										<img v-lazy="item" />
									</div>
								</viewer>
							</template>
							<template slot-scope="{ row }" slot="merchant_reply_content">
								<div class="mb5 content_font" v-if="row.replyComment">
									{{ row.replyComment.content }}
								</div>
							</template>
							<template slot-scope="{ row, index }" slot="action">
								<a @click="reply(row)">Reply</a>
							</template>
						</Table>
						</Col>
					</Row>
					<Spin size="large" fix v-if="spinShow"></Spin>
				</Form>
			</div>
			<Modal v-model="modalPic" width="960px" scrollable footer-hide closable title="Upload product image"
				:mask-closable="false" :z-index="999">
				<uploadPictures :isChoice="isChoice" @getPic="getPic" @getPicD="getPicD" :gridBtn="gridBtn"
					:gridPic="gridPic" v-if="modalPic"></uploadPictures>
			</Modal>
			<Card :bordered="false" dis-hover class="fixed-card">
				<Form>
					<FormItem>
						<Button v-if="currentTab !== '1'" @click="upTab">{{$t('page.product.prev')}}</Button>
						<Button type="primary" class="submission" v-if="currentTab !== '3'"
							@click="downTab('formValidate')">{{$t('page.order.next_step')}}</Button>
						<!-- <Button
              type="primary"
              :disabled="openSubimit"
              class="submission"
              @click="handleSubmit('formValidate')"
              v-if="!pid && (productId || currentTab === '5')"
              >Save</Button
            > -->
					</FormItem>
				</Form>
			</Card>
		</Drawer>
		<freightTemplate :template="template" v-on:changeTemplate="changeTemplate" ref="templates"></freightTemplate>
		<add-attr ref="addattr" @getList="userSearchs"></add-attr>
		<!-- 商品列表 -->
		<Modal v-model="goodsModals" title="Product List" footerHide scrollable width="900" @on-cancel="goodCancel">
			<goods-list v-if="goodsModals" ref="goodslist" @getProductId="getProductId" :ischeckbox="true"></goods-list>
		</Modal>
		<!-- 商品标签 -->
		<Modal v-model="storeLabelShow" scrollable title="Select Product Label" :closable="true" width="540"
			:footer-hide="true" :mask-closable="false">
			<labelList ref="storeLabel" @activeData="activeStoreData" @close="storeLabelClose"></labelList>
		</Modal>
		<menus-from :formValidate="formBrand" :fromName="1" ref="menusFrom"></menus-from>
		<Modal v-model="attrShow" scrollable title="请选择商品规格" :closable="false" width="320" :footer-hide="true"
			:mask-closable="false">
			<attr-list :attrs="attrsList" @activeData="activeAttr" @close="labelAttr" @subAttrs="subAttrs"
				v-if="attrShow"></attr-list>
		</Modal>
		<Modal v-model="replyModal" scrollable title="Reply Content" closable>
			<Form ref="replyForm" :model="replyForm" :rules="ruleInline" :label-position="labelPosition"
				@submit.native.prevent>
				<FormItem prop="content">
					<Input v-model="replyForm.content" type="textarea" :rows="4" />
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="primary" @click="oks">Confirm</Button>
				<Button @click="cancels">Cancel</Button>
			</div>
		</Modal>
		<Modal v-model="parcelShow" scrollable title="Add Package" :closable="true" width="720" :footer-hide="true"
			:mask-closable="false">
			<Form ref="dynamicValidateForm" :label-width="100" class="demo-dynamic">
				<FormItem label="Package Information：" class="labeltop">
					<Table :data="parcelNumValidateForm" :columns="parcelColumns" border>
						<template slot-scope="{ row, index }" slot="num">
							<Input v-model="parcelNumValidateForm[index].num"></Input>
						</template>
						<template slot-scope="{ row, index }" slot="length">
							<InputNumber v-model="parcelNumValidateForm[index].length" :min="0" class="priceBox">
							</InputNumber>
						</template>
						<template slot-scope="{ row, index }" slot="width">
							<InputNumber v-model="parcelNumValidateForm[index].width" :min="0" class="priceBox">
							</InputNumber>
						</template>
						<template slot-scope="{ row, index }" slot="height">
							<InputNumber v-model="parcelNumValidateForm[index].height" :min="0" class="priceBox">
							</InputNumber>
						</template>
						<template slot-scope="{ row, index }" slot="weight">
							<InputNumber v-model="parcelNumValidateForm[index].weight" :min="0" class="priceBox">
							</InputNumber>
						</template>
						<template slot-scope="{ row, index }" slot="action">
							<a @click="parcelDel">Delete</a>
						</template>
					</Table>
				</FormItem>
				<!-- <FormItem>
					<Button type="primary" @click="submitParcel()">Submit</Button>
					<Button @click="addDomain">Add</Button>
				</FormItem> -->
			</Form>

		</Modal>

	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import Setting from '@/setting';
	import util from '@/libs/util';
	import vuedraggable from 'vuedraggable';
	import uploadPictures from '@/components/uploadPictures';
	import freightTemplate from '@/components/freightTemplate';
	import wangeditor from '@/components/wangEditor/index.vue';
	import menusFrom from './menusFrom';
	import labelList from '@/components/labelList';
	import couponList from '@/components/couponList';
	import goodsList from '@/components/goodsList/index';
	import addAttr from './addAttr';
	import attrList from './attrList';
	import {
		productInfoApi,
		cascaderList,
		productAddApi,
		generateAttrApi,
		productGetRuleApi,
		productGetTemplateApi,
		productGetTempKeysApi,
		checkActivityApi,
		productCache,
		cacheDelete,
		brandList,
		productCreateApi,
		productAllUnit,
		productUnitCreate,
		uploadType,
		productAllEnsure,
		productLabelAdd,
		productAllSpecs,
		productReplyApi,
		setReplyApi,
		allSystemForm,
		systemFormInfo,
		cascaderListApi,
	} from '@/api/product';
	import {
		erpConfig
	} from '@/api/erp';
	import {
		uploadByPieces
	} from '@/utils/upload'; //引入uploadByPieces方法
	export default {
		components: {
			uploadPictures,
			freightTemplate,
			goodsList,
			addAttr,
			couponList,
			menusFrom,
			attrList,
			labelList,
			wangeditor,
			draggable: vuedraggable,
		},
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			productId: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				parcelShow: false,
				//包裹信息
				parcelNumValidateForm: [{
					num: "",
					length: 0,
					width: 0,
					height: 0,
					weight: 0,
				}],
				// parcelColumns: [
				//   {
				//     title: "序号",
				//     slot: "num",
				//     align: "center",
				//     minWidth: 80,
				//   },
				//   {
				//     title: "L(cm)",
				//     slot: "length",
				//     align: "center",
				//     minWidth: 80,
				//   },
				//   {
				//     title: "W(cm)",
				//     slot: "width",
				//     align: "center",
				//     minWidth: 80,
				//   },
				//   {
				//     title: "H(cm)",
				//     slot: "height",
				//     align: "center",
				//     minWidth: 80,
				//   },
				//   {
				//     title: "重量（KG）",
				//     slot: "weight",
				//     align: "center",
				//     minWidth: 80,
				//   },
				//   {
				//     title: "操作",
				//     slot: "action",
				//     // fixed: "right",
				//     align: "center",
				//     minWidth: 140,
				//   },
				// ],
				parcelNumValidateFormIndex: 0,
				formTypeList: [],
				formColumns: [{
						title: '表单标题',
						key: 'title',
						// align:'center',
						minWidth: 100
					},
					{
						title: '表单类型',
						key: 'name',
						// align:'center',
						minWidth: 100
					},
					{
						title: '是否必填',
						slot: 'require',
						// align:'center',
						minWidth: 100
					}
				],
				specsList: [],
				specsColumns: [{
						title: '参数名称',
						key: 'name',
						align: 'center',
						width: 150,
						render: (h, params) => {
							return h('div', [
								h('Input', {
									props: {
										value: params.row.name,
										placeholder: '请输入参数名称',
									},
									on: {
										'on-change': (e) => {
											params.row.name = e.target.value;
											this.specsList[params.index].name = e.target.value;
										},
									},
								}),
							]);
						},
					},
					{
						title: '参数值',
						key: 'value',
						align: 'center',
						width: 300,
						render: (h, params) => {
							return h('div', [
								h('Input', {
									props: {
										value: params.row.value,
										placeholder: '请输入参数值',
									},
									on: {
										'on-change': (e) => {
											params.row.value = e.target.value;
											this.specsList[params.index].value = e.target.value;
										},
									},
								}),
							]);
						},
					},
					{
						title: '排序',
						key: 'sort',
						align: 'center',
						width: 100,
						render: (h, params) => {
							return h('div', [
								h('InputNumber', {
									props: {
										value: parseInt(params.row.sort) || 0,
										placeholder: '排序',
										precision: 0,
									},
									on: {
										'on-change': (e) => {
											params.row.sort = e;
											this.specsList[params.index].sort = e;
										},
									},
								}),
							]);
						},
					},
					{
						title: '操作',
						slot: 'action',
						align: 'center',
						minWidth: 120,
					},
				],
				//自定义留言下拉选择
				customList: [{
						value: 'text',
						label: '文本框',
					},
					{
						value: 'number',
						label: '数字',
					},
					{
						value: 'email',
						label: '邮件',
					},
					{
						value: 'data',
						label: '日期',
					},
					{
						value: 'time',
						label: '时间',
					},
					{
						value: 'id',
						label: '身份证',
					},
					{
						value: 'phone',
						label: '手机号',
					},
					{
						value: 'img',
						label: '图片',
					},
				],
				// headTab: [
				//   { title: $t('page.product.general_information'), name: '1' },
				//   { title: $t('page.product.specifications'), name: '2' },
				//   { title: $t('page.product.description'), name: '3' },
				//   // { title: 'Other Settings', name: '4' },
				//   // { title: '商品评论', name: '5' },
				// ],
				productType: [{
						name: '普通商品',
						title: '物流发货',
						id: 0
					},
					{
						name: '卡密/网盘',
						title: '自动发货',
						id: 1
					},
					{
						name: '虚拟商品',
						title: '虚拟发货',
						id: 3
					},
				],
				virtualList: [],
				carMyShow: false, //是否开启卡密弹窗
				customBtn: false, //自定义留言开关
				attrShow: false,
				content: '',
				contents: '',
				seletVideo: 0,
				fileUrl: Setting.apiBaseURL + '/file/upload',
				fileUrl2: Setting.apiBaseURL + '/file/video_upload',
				upload_type: '', //视频上传类型 1 本地上传 2 3 4 OSS上传
				uploadData: {}, // 上传参数
				header: {},
				storeDataLabel: [],
				labelShow: false,
				storeLabelShow: false,
				props: {
					emitPath: false,
					multiple: true,
					checkStrictly: true
				},
				type: 0,
				goodsModals: false,
				off_show: 0,
				modals: false,
				spinShow: false,
				openSubimit: false,
				grid2: {
					xl: 10,
					lg: 12,
					md: 12,
					sm: 24,
					xs: 24,
				},
				grid3: {
					xl: 18,
					lg: 18,
					md: 20,
					sm: 24,
					xs: 24,
				},
				// 批量设置表格data
				oneFormBatch: [{
					attr: 'All',
					pic: '',
					price: 0,
					discount: 0,
					settle_price: 0,
					cost: 0,
					ot_price: 0,
					parcel_num: 0,
					stock: 0,
					bar_code: '',
					code: '',
					weight: 0,
					volume: 0,
				}, ],
				// 规格数据
				formDynamic: {
					attrsName: '',
					attrsVal: '',
				},
				formDynamicNameData: [],
				isBtn: false,
				columnsCarMy: [],
				// columns2: [
				//   {
				//     title: 'Specification',
				//     slot: 'attr',
				//     align: 'center',
				//     minWidth: 80,
				//   },
				//   {
				//     title: 'Image',
				//     slot: 'pic',
				//     align: 'center',
				//     minWidth: 80,
				//   },
				//   {
				//     title: 'Wholesale Price',
				//     slot: 'price',
				//     align: 'center',
				//     minWidth: 95,
				//   },
				//   {
				//     title: "Discount",
				//     slot: "discount",
				//     align: "center",
				//     minWidth: 95,
				//   },
				// {
				//   title: "Settlement Price",
				//   slot: "settle_price",
				//   align: "center",
				//   minWidth: 95,
				// },
				//   // {
				//   //   title: '成本价',
				//   //   slot: 'cost',
				//   //   align: 'center',
				//   //   minWidth: 95,
				//   // },
				//   {
				//     title: 'Original Price',
				//     slot: 'ot_price',
				//     align: 'center',
				//     minWidth: 95,
				//   },
				//   {
				//     title: 'Inventory',
				//     slot: 'stock',
				//     align: 'center',
				//     minWidth: 95,
				//   },
				//   {
				//     title: 'Bar Code',
				//     slot: 'bar_code',
				//     align: 'center',
				//     minWidth: 120,
				//   },
				//   {
				//     title: 'SKU',
				//     slot: 'code',
				//     align: 'center',
				//     minWidth: 120,
				//   },
				//   {
				//     title: 'Weight（KG）',
				//     slot: 'weight',
				//     align: 'center',
				//     minWidth: 95,
				//   },
				//   {
				//     title: 'Volume(m³)',
				//     slot: 'volume',
				//     align: 'center',
				//     minWidth: 95,
				//   },
				//   {
				//     title: 'Operate',
				//     slot: 'action',
				//     align: 'center',
				//     minWidth: 140,
				//   },
				// ],
				columns: [],
				columnsInstall: [],
				columnsInstal2: [],
				gridPic: {
					xl: 6,
					lg: 8,
					md: 12,
					sm: 12,
					xs: 12,
				},
				gridBtn: {
					xl: 4,
					lg: 8,
					md: 8,
					sm: 8,
					xs: 8,
				},
				formValidate: {
					size_data: {
						long: "",
						width: "",
						height: '',
						unit: "cm",
					},
					system_form_id: 0, //自定义表单id
					supplier_id: 0, //供应商
					is_limit: 0, //是否限购开关
					limit_type: 1, //1单次限购，2长期限购
					limit_num: 1, //限购数量
					disk_info: '', //卡密简介
					auto_on_time: '',
					video_open: false, //视频按钮是否显示
					store_name: '',
					freight: 1, //运费设置
					postage: 0, //设置运费金额
					custom_form: [], //自定义留言
					cate_id: [],
					ensure_id: [],
					keyword: '',
					unit_name: '',
					specs_id: 0,
					store_info: '',
					bar_code: '',
					code: '',
					image: '',
					recommend_image: '',
					slider_image: [],
					description: '',
					ficti: 0,
					sort: 0,
					is_show: 1,
					is_hot: 0,
					is_benefit: 0,
					is_best: 0,
					is_new: 0,
					is_good: 0,
					is_postage: 0,
					id: 0,
					spec_type: 0,
					video_link: '',
					temp_id: '',
					attrs: [],
					attr_data: [{
							name: 'Main features',
							value: ''
						},
						{
							name: 'Upholstery Material',
							value: ''
						},
						{
							name: 'Use Case',
							value: ''
						},
						{
							name: 'Place of Origin',
							value: ''
						},
					],
					items: [{
						pic: '',
						price: 0,
						cost: 0,
						ot_price: 0,
						parcel_num: 0,
						discount: 0,
						stock: 0,
						bar_code: '',
						code: '',
					}, ],
					header: [],
					selectRule: '',
					coupon_ids: [],
					command_word: '',
					delivery_type: ["1"],
					specs: [],
					recommend_list: [],
					brand_id: [],
					product_type: 0,
				},
				ruleList: [],
				templateList: [],
				createBnt: false,
				showIput: false,
				manyFormValidate: [],
				// 单规格表格data
				oneFormValidate: [{
					pic: '',
					price: 0,
					discount: 0,
					settle_price: 0,
					cost: 0,
					ot_price: 0,
					parcel_num: 0,
					stock: 0,
					bar_code: '',
					code: '',
					weight: 0,
					volume: 0,
					brokerage: 0,
					brokerage_two: 0,
					vip_price: 0,
					virtual_list: [],
					parcel_list: []
				}, ],
				images: [],
				imagesTable: '',
				currentTab: '1',
				isChoice: '',
				grid: {
					xl: 8,
					lg: 8,
					md: 12,
					sm: 24,
					xs: 24,
				},
				loading: false,
				modalPic: false,
				template: false,
				uploadList: [],
				treeSelect: [],
				labelSelect: [],
				ensureData: [],
				specsData: [],
				picTit: '',
				tableIndex: 0,
				ruleValidate: {
					store_name: [{
						required: true,
						message: '请输入商品名称',
						trigger: 'blur'
					}, ],
					cate_id: [{
						required: true,
						message: '请选择商品分类',
						trigger: 'change',
						type: 'array',
					}, ],
					keyword: [{
						required: true,
						message: '请输入商品关键字',
						trigger: 'blur'
					}, ],
					unit_name: [{
						required: true,
						message: '请输入单位',
						trigger: 'change',
					}, ],
					store_info: [{
						required: true,
						message: '请输入商品简介',
						trigger: 'blur'
					}, ],
					slider_image: [{
						required: true,
						message: '请上传商品轮播图',
						type: 'array',
						trigger: 'change',
					}, ],
					spec_type: [{
						required: true,
						message: '请选择商品规格',
						trigger: 'change'
					}, ],
					selectRule: [{
						required: true,
						message: '请选择商品规格属性',
						trigger: 'change'
					}, ],
				},
				manyBrokerage: 0,
				manyBrokerageTwo: 0,
				manyVipPrice: 0,
				upload: {
					videoIng: false, // 是否显示进度条；
				},
				videoIng: false, // 是否显示进度条；
				progress: 0, // 进度条默认0
				videoLink: '',
				attrs: [],
				updateIds: [],
				updateName: [],
				rakeBack: [{
						title: '一级返佣',
						slot: 'brokerage',
						align: 'center',
						width: 95,
					},
					{
						title: '二级返佣',
						slot: 'brokerage_two',
						align: 'center',
						width: 95,
					},
				],
				member: [{
					title: '会员价',
					slot: 'vip_price',
					align: 'center',
					width: 95,
				}, ],
				headerCarMy: {
					title: '卡密设置',
					slot: 'fictitious',
					align: 'center',
					width: 95,
				},
				columnsInstalM: [],
				moveIndex: '',
				goodsData: [],
				brandData: [],
				unitNameList: [],
				formBrand: {},
				attrsList: [],
				activeAtter: [],
				tabIndex: 0,
				tabName: '',
				attrData: [],
				datePickerOptions: {
					disabledDate(date) {
						return date && date.valueOf() < Date.now() - 86400000;
					},
				},
				openErp: false,
				pid: 0,
				replyColumns: [{
						title: '评论ID',
						key: 'id',
						width: 80,
					},
					{
						title: '商品信息',
						slot: 'info',
						minWidth: 280,
					},
					{
						title: '用户名称',
						key: 'nickname',
						minWidth: 150,
					},
					{
						title: '评分',
						key: 'score',
						minWidth: 90,
					},
					{
						title: '评价内容',
						slot: 'content',
						minWidth: 210,
					},
					{
						title: '回复内容',
						slot: 'merchant_reply_content',
						minWidth: 250,
					},
					{
						title: '评价时间',
						key: 'add_time',
						minWidth: 150,
					},
					{
						title: '操作',
						slot: 'action',
						fixed: 'right',
						minWidth: 150,
					},
				],
				replyData: [],
				replyLoading: false,
				replyValidate: {
					is_reply: '',
					store_name: '',
					account: '',
					product_id: 0,
					page: 1,
					limit: 15,
				},
				total: 0,
				replyModal: false,
				rows: {},
				replyForm: {
					content: '',
				},
				ruleInline: {
					content: [{
						required: true,
						message: '请输入回复内容',
						trigger: 'blur'
					}, ],
				},
				formList: []
			};
		},
		computed: {
			...mapState('store/layout', ['isMobile', 'menuCollapse']),
			labelWidth() {
				return this.isMobile ? undefined : 120;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'right';
			},
			labelBottom() {
				return this.isMobile ? undefined : 15;
			},
			startPickOptions() {
				const that = this;
				return {
					disabledDate(time) {
						if (that.formValidate.auto_off_time) {
							return (
								time.getTime() >
								new Date(that.formValidate.auto_off_time).getTime() - 86400000
							);
						}
						return '';
					},
				};
			},
			endPickOptions() {
				const that = this;
				return {
					disabledDate(time) {
						if (that.formValidate.is_show == '1') {
							return time.getTime() < Date.now();
						}
						if (that.formValidate.auto_on_time) {
							return (
								time.getTime() <
								new Date(that.formValidate.auto_on_time).getTime() + 86400000
							);
						}
						return '';
					},
				};
			},
			changeUnit() {
				const {
					unitNameList
				} = this;
				const {
					unit_name
				} = this.formValidate;
				return {
					unitNameList,
					unit_name,
				};
			},
			columns2() {
				return [{
						title: $t('page.product.specification'),
						slot: 'attr',
						align: 'center',
						minWidth: 80,
					},
					{
						title: $t('page.product.image'),
						slot: 'pic',
						align: 'center',
						minWidth: 80,
					},
					{
						title: $t('page.product.wholesale_price'),
						slot: 'price',
						align: 'center',
						minWidth: 95,
					},
					//   {
					//     title: $t('page.order.discount'),
					//     slot: "discount",
					//     align: "center",
					//     minWidth: 95,
					//   },
					// {
					//   title: $t('page.product.settlement_price'),
					//   slot: "settle_price",
					//   align: "center",
					//   minWidth: 95,
					// },
					//   {
					//     title: $t('page.product.original_price'),
					//     slot: 'ot_price',
					//     align: 'center',
					//     minWidth: 95,
					//   },
					{
						title: $t('page.stock.inventory'),
						slot: 'stock',
						align: 'center',
						minWidth: 95,
					},
					// {
					//   title: $t('page.product.bar_code'),
					//   slot: 'bar_code',
					//   align: 'center',
					//   minWidth: 120,
					// },
					{
						title: $t('page.product.SKU'),
						slot: 'code',
						align: 'center',
						minWidth: 120,
					},
					{
						title: $t('page.product.weight') + '（KG）',
						slot: 'weight',
						align: 'center',
						minWidth: 95,
					},
					// {
					//   title: $t('page.product.volume')+'(m³)',
					//   slot: 'volume',
					//   align: 'center',
					//   minWidth: 95,
					// },
					// {
					//   title: $t('page.product.operate'),
					//   slot: 'action',
					//   align: 'center',
					//   minWidth: 140,
					// },
				]
			},
			headTab() {
				return [{
						title: $t('page.product.general_information'),
						name: '1'
					},
					{
						title: $t('page.product.specifications'),
						name: '2'
					},
					{
						title: $t('page.product.description'),
						name: '3'
					},
					// { title: 'Other Settings', name: '4' },
					// { title: '商品评论', name: '5' },
				]
			},
			translatedColumns() {
				return this.formValidate.header.map(col => ({
					...col,
					title: this.$t(`tableHeader.${col.title}`) || col.title // fallback 原文
				}))
			},
			parcelColumns() {
				return [{
						title: this.$t('page.product.number'),
						slot: "num",
						align: "center",
						minWidth: 200,
					},
					{
						title: this.$t('page.product.length') + '(cm)',
						slot: "length",
						align: "center",
						minWidth: 80,
					},
					{
						title: this.$t('page.product.width') + '(cm)',
						slot: "width",
						align: "center",
						minWidth: 80,
					},
					{
						title: this.$t('page.product.height') + '(cm)',
						slot: "height",
						align: "center",
						minWidth: 80,
					},
					{
						title: this.$t('page.product.weight') + '(KG)',
						slot: "weight",
						align: "center",
						minWidth: 80,
					},
					// {
					//   title: this.$t('page.product.operate'),
					//   slot: "action",
					//   align: "center",
					//   minWidth: 140,
					// },
				]
			},
		},
		watch: {
			changeUnit({
				unitNameList,
				unit_name
			}) {
				if (!unit_name) {
					return;
				}
				let result = unitNameList.find((unit) => unit.name == unit_name);
				if (!result) {
					this.formValidate.unit_name = '';
				}
			},
			currentTab(value) {
				this.$nextTick(() => {
					if (this.pid && value == 3) {
						this.$refs.wangeditor.editor.disable();
					} else {
						this.$refs.wangeditor.editor.enable();
					}
				});
			}
		},
		created() {
			this.columns = this.columns2.slice(1, 10);
			let data = JSON.parse(JSON.stringify(this.columns2));
			data.splice(8, 2, this.headerCarMy);
			this.columnsCarMy = data;
			let fictitious = JSON.parse(JSON.stringify(this.columns2));
			fictitious.splice(8, 2);
			this.columnsFictitious = fictitious;
			this.getToken();
			this.getErpConfig();
		},
		mounted() {
			this.setCopyrightShow({
				value: false
			});
			if ((this.productId !== '0' && this.productId) || this.$route.query.copy) {
				this.getInfo();
			} else if (this.productId === '0') {
				productCache()
					.then((res) => {
						let data = res.data.info;
						if (!Array.isArray(data)) {
							let cate_id = data.cate_id.map(Number);
							this.attrs = data.items || [];
							let ids = [];
							let brandIds = [];
							data.brand_id.forEach(item => {
								brandIds.push(item.toString())
							})
							this.formValidate = data;
							this.formTypeList = data.custom_form_info || [];
							this.formValidate.brand_id = brandIds;
							this.formValidate.coupon_ids = ids;
							this.formValidate.is_limit = this.formValidate.is_limit ? 1 : 0;
							this.formValidate.limit_type = parseInt(
								this.formValidate.limit_type
							);
							this.updateIds = ids;
							this.updateName = data.coupons;
							this.formValidate.cate_id = cate_id;
							this.storeDataLabel = data.store_label_id;
							this.specsList = data.specs;
							this.oneFormValidate = data.attrs;
							this.formValidate.header = [];
							this.generate(0);
							this.columns = this.columns2.slice(1, 10);
							this.formValidate.system_form_id = data.system_form_id || 0;
							if (this.formValidate.system_form_id) {
								this.customBtn = true;
							} else {
								this.customBtn = false;
							}
							this.spec_type = data.spec_type;
							if (data.spec_type === 0) {
								this.manyFormValidate = [];
							} else {
								this.createBnt = true;
								this.oneFormValidate = [{
									pic: data.slider_image[0],
									price: 0,
									settle_price: 0,
									cost: 0,
									ot_price: 0,
									stock: 0,
									discount: 0,
									parcel_num: 0,
									bar_code: '',
									code: '',
									weight: 0,
									volume: 0,
									brokerage: 0,
									brokerage_two: 0,
									vip_price: 0,
									virtual_list: [],
								}, ];
							}
							this.spinShow = false;
						}
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			}
			if (this.$route.query.type) {
				this.modals = true;
				this.type = this.$route.query.type;
			} else {
				this.type = 0;
			}
			this.goodsCategory();
			this.productGetRule();
			// this.productGetTemplate();
			this.getBrandList();
			// this.getAllUnit();
			this.uploadType();
			// this.getProductAllEnsure();
			this.getProductAllSpecs();
			// this.getAllSystemForm();
		},
		destroyed() {
			this.setCopyrightShow({
				value: true
			});
		},
		methods: {
			...mapMutations('layout', ['setCopyrightShow']),
			changeForm(e) {
				this.getSystemFormInfo(e, {
					type: 1
				});
			},
			// 点击图片时调用预览
			    handleImageClick(index) {
			      this.$viewerApi({
			        images: this.formValidate.slider_image,
			        options: {
			          inline: false,
			          button: false,
			          navbar: false,
			          title: false,
			          toolbar: false,
			          tooltip: false,
			          movable: false,
			          zoomable: false,
			          rotatable: false,
			          scalable: false,
			          transition: false,
			          fullscreen: false,
			          keyboard: false,
			        }
			      }).view(index);
			    },
			addParcel(index) {
				console.log("oneFormValidate2222222", this.oneFormValidate)
				console.log("index", index)
				if (this.formValidate.spec_type) {
					if (this.manyFormValidate[index].code == "") {
						this.$Message.error("请先填写规格SKU!");
						return
					}
					this.parcelNumValidateForm = this.manyFormValidate[index].parcel_list;

				} else {
					if (this.oneFormValidate[index].code == "") {
						this.$Message.error("请先填写规格SKU!");
						return
					}
					this.parcelNumValidateForm = this.oneFormValidate[index].parcel_list;
				}
				this.parcelNumValidateFormIndex = index
				this.parcelShow = true;
			},
			// 删除包裹
			parcelDel(index) {
				this.parcelNumValidateForm.splice(index, 1);
			},
			submitParcel() {
				if (this.formValidate.product_type) {
					this.manyFormValidate[this.parcelNumValidateFormIndex].parcel_list = this.parcelNumValidateForm;
				} else {
					this.oneFormValidate[this.parcelNumValidateFormIndex].parcel_list = this.parcelNumValidateForm;
				}
				this.parcelShow = false;
			},
			addDomain() {
				var num = ""
				if (this.formValidate.product_type) {
					num = this.manyFormValidate[this.parcelNumValidateFormIndex].code + "-0" + (this.parcelNumValidateForm
						.length + 1)
				} else {
					num = this.oneFormValidate[this.parcelNumValidateFormIndex].code + "-0" + (this.parcelNumValidateForm
						.length + 1)
				}
				this.parcelNumValidateForm.push({
					num: num,
					length: 0,
					width: 0,
					height: 0,
					weight: 0,
				});
			},
			getSystemFormInfo(e, data) {
				systemFormInfo(e, data).then(res => {
					this.formTypeList = res.data.info;
				}).catch(err => {
					this.$Message.error(err.msg);
				})
			},
			getAllSystemForm() {
				allSystemForm().then(res => {
					this.formList = res.data;
				}).catch(err => {
					this.$Message.error(err.msg);
				})
			},
			limitTap(e) {
				if (e) {
					this.formValidate.limit_type =
						this.formValidate.is_limit && !this.formValidate.limit_type ? 1 : 0;
					this.formValidate.limit_num =
						this.formValidate.is_limit && this.formValidate.limit_num == 0 ?
						1 :
						0;
				} else {
					this.formValidate.limit_type = 0;
					this.formValidate.limit_num = 0;
				}
			},
			//erp配置
			getErpConfig() {
				erpConfig()
					.then((res) => {
						this.openErp = res.data.open_erp;
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			delSpecs(index) {
				this.specsList.splice(index, 1);
			},
			addSpecs() {
				let obj = {
					name: '',
					value: '',
					sort: 0
				};
				this.specsList.push(obj);
			},
			specsInfo(e) {
				this.specsData.forEach((item) => {
					if (item.id == e) {
						this.specsList = item.specs;
					}
				});
			},
			getProductAllSpecs() {
				productAllSpecs()
					.then((res) => {
						this.specsData = res.data;
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			getProductAllEnsure() {
				productAllEnsure()
					.then((res) => {
						this.ensureData = res.data;
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			//添加倒入卡密的值
			changeVirtual(e) {
				this.virtualList = this.virtualList.concat(e);
			},
			//添加卡密
			addVirtual(index, name) {
				this.tabIndex = index;
				this.tabName = name;
				this.virtualListClear();
				this.$refs.addCarMy.fixedCar = {
					disk_info: '',
					stock: 0,
				};
				this.$refs.addCarMy.cartMyType = 1;
				this.carMyShow = true;
			},
			//确认提交卡密
			fixdBtn(e) {
				if (e.cartMyType == 1) {
					this.$set(this[this.tabName][this.tabIndex], 'disk_info', e.disk_info);
					this.$set(this[this.tabName][this.tabIndex], 'stock', Number(e.stock));
					this[this.tabName][this.tabIndex].virtual_list = [];
				} else {
					this.$set(
						this[this.tabName][this.tabIndex],
						'virtual_list',
						e.virtualList
					);
					this.$set(
						this[this.tabName][this.tabIndex],
						'stock',
						e.virtualList.length
					);
					this[this.tabName][this.tabIndex].disk_info = '';
				}
				this.carMyShow = false;
			},
			closeCarMy() {
				this.carMyShow = false;
			},
			//清空卡密
			virtualListClear() {
				this.virtualList = [{
					key: '',
					value: '',
				}, ];
			},
			seeVirtual(data, name, index) {
				this.tabName = name;
				this.tabIndex = index;
				this.virtualListClear();
				this.$refs.addCarMy.fixedCar = {
					disk_info: '',
					stock: 0,
				};
				if (data.virtual_list && data.virtual_list.length) {
					this.$refs.addCarMy.cartMyType = 2;
					this.virtualList = data.virtual_list;
				} else if (data.disk_info) {
					this.$refs.addCarMy.cartMyType = 1;
					this.$refs.addCarMy.fixedCar.disk_info = data.disk_info;
					this.$refs.addCarMy.fixedCar.stock = data.stock;
				}
				this.carMyShow = true;
			},
			//动态添加组件
			addAssembly() {
				this.formValidate.custom_form.push({
					title: '',
					label: 'text',
					value: '',
					status: 0,
				});
			},
			customMessBtn(e) {
				if (!e) {
					this.formValidate.system_form_id = 0;
				}
			},
			addcustom() {
				if (this.formValidate.custom_form.length > 9) {
					this.$Message.warning('最多添加10条');
				} else {
					this.addAssembly();
				}
			},
			delcustom(index) {
				this.formValidate.custom_form.splice(index, 1);
			},
			//定时上架
			onchangeShow(e) {
				this.formValidate.auto_on_time = e;
			},
			//定时下架
			onchangeOff(e) {
				this.formValidate.auto_off_time = e;
			},
			//打开属性
			batchAttr() {
				this.attrShow = true;
			},
			//获取属性
			getAttr() {
				this.oneFormBatch[0].attr = 'All';
				let data = this.attrs;
				data.map((el) => {
					el.details = [];
					el.detail.map((label) => {
						el.details.push({
							name: label,
							select: false,
						});
					});
				});
				this.attrsList = data;
			},
			//选中属性
			activeAttr(e) {
				this.attrsList = e;
			},
			//关闭属性弹窗
			labelAttr() {
				this.attrShow = false;
			},
			//多属性为空
			manyEmpty(j) {
				j.pic = '';
				j.price = 0;
				j.discount = 0;
				j.settle_price = 0;
				j.cost = 0;
				j.ot_price = 0;
				j.parcel_num = 0;
				j.stock = 0;
				j.bar_code = '';
				j.code = '';
				j.weight = 0;
				j.volume = 0;
				j.virtual_list = [];
			},

			doCombination(arr) {
				var count = arr.length - 1; //数组长度(从0开始)
				var tmp = [];
				var totalArr = []; // 总数组

				return doCombinationCallback(arr, 0); //从第一个开始
				//js 没有静态数据，为了避免和外部数据混淆，需要使用闭包的形式
				function doCombinationCallback(arr, curr_index) {
					for (let val of arr[curr_index]) {
						tmp[curr_index] = val; //以curr_index为索引，加入数组
						//当前循环下标小于数组总长度，则需要继续调用方法
						if (curr_index < count) {
							doCombinationCallback(arr, curr_index + 1); //继续调用
						} else {
							totalArr.push(tmp.join(',')); //(直接给push进去，push进去的不是值，而是值的地址)
						}

						//js  对象都是 地址引用(引用关系)，每次都需要重新初始化，否则 totalArr的数据都会是最后一次的 tmp 数据；
						let oldTmp = tmp;
						tmp = [];
						for (let index of oldTmp) {
							tmp.push(index);
						}
					}
					return totalArr;
				}
			},

			//提交属性值；
			subAttrs(e) {
				let selectData = [];
				this.attrsList.forEach((el, index) => {
					let obj = [];
					el.details.forEach((label) => {
						if (label.select) {
							obj.push(label.name);
						}
					});
					if (obj.length) {
						selectData.push(obj);
					}
				});
				let newData = [];
				if (selectData.length) {
					newData = this.doCombination(selectData);
				}
				this.attrShow = false;
				this.activeAtter = selectData;
				this.oneFormBatch[0].attr = newData.length ? newData.join(';') : 'All';
				this.manyFormValidate.forEach((j) => {
					j.select = false;
					if (newData.length) {
						newData.forEach((item) => {
							if (j.values.split('').length == item.split('').length) {
								if (j.values == item) {
									j.select = true;
								}
							} else {
								if (j.values.indexOf(item) != -1) {
									j.select = true;
								}
							}
						});
					} else {
						j.select = true;
					}
				});
				this.$set(this, 'manyFormValidate', this.manyFormValidate);
			},
			goodsOn(e) {
				if (e == 0 || e == 1) {
					this.formValidate.auto_on_time = '';
				}
			},
			goodsOff(e) {
				if (!e) {
					this.formValidate.auto_off_time = '';
				}
			},
			addBrand() {
				this.$refs.menusFrom.modals = true;
				this.$refs.menusFrom.titleFrom = '添加品牌分类';
				this.formBrand = {
					sort: 0,
					is_show: 1,
				};
				this.formBrand.fid = [0];
				this.$refs.menusFrom.type = 1;
			},
			getAllUnit() {
				productAllUnit()
					.then((res) => {
						this.unitNameList = res.data;
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			addClass() {
				this.$modalForm(productCreateApi()).then(() => this.goodsCategory());
			},
			addUnit() {
				this.$modalForm(productUnitCreate()).then(() => this.getAllUnit());
			},
			addStoreLabel() {
				this.$modalForm(productLabelAdd()).then(() => {});
			},
			productTypeTap(num, item) {
				if (num == 1) {
					if (this.productId) return this.$Message.error('商品类型不能切换！');
					this.formValidate.product_type = item.id;
				}
				if (this.formValidate.product_type) {
					this.headTab = [{
							title: '基础信息',
							name: '1'
						},
						{
							title: '规格库存',
							name: '2'
						},
						{
							title: '商品详情',
							name: '3'
						},
						{
							title: '其他设置',
							name: '4'
						},
					];
					this.formValidate.postage = 0;
					this.formValidate.supplier_id = 0;
				} else {
					this.headTab = [{
							title: '基础信息',
							name: '1'
						},
						{
							title: '规格库存',
							name: '2'
						},
						{
							title: '商品详情',
							name: '3'
						},
						{
							title: '其他设置',
							name: '4'
						},
					];
				}
			},
			// 标签弹窗关闭
			labelClose() {
				this.labelShow = false;
			},
			closeStoreLabel(label) {
				let index = this.storeDataLabel.indexOf(
					this.storeDataLabel.filter((d) => d.id == label.id)[0]
				);
				this.storeDataLabel.splice(index, 1);
			},
			activeStoreData(storeDataLabel) {
				this.storeLabelShow = false;
				this.storeDataLabel = storeDataLabel;
			},
			openStoreLabel(row) {
				this.storeLabelShow = true;
				this.$refs.storeLabel.userLabel(
					JSON.parse(JSON.stringify(this.storeDataLabel))
				);
			},
			// 标签弹窗关闭
			storeLabelClose() {
				this.storeLabelShow = false;
			},
			// 品牌列表
			getBrandList() {
        brandList()
					.then((res) => {
						//initBran()函数作用iview中规定value必须是字符串，后台返回成了数字，用于处理这个，给了个递归；
						this.initBran(res.data);
						this.brandData = res.data;
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			initBran(data) {
				data.map(item => {
					item.value = item.value.toString();
					if (item.children && item.children.length) {
						this.initBran(item.children);
					}
				})
			},
			getProductId(e) {
				this.goodsModals = false;
				let nArr = this.goodsData.concat(e).filter((element, index, self) => {
					return (
						self.findIndex((x) => x.product_id == element.product_id) == index
					);
				});

				this.goodsData = nArr.slice(0, 12);
			},
			goodCancel() {
				this.goodsModals = false;
			},
			cancel() {
				this.$router.push({
					path: `${Setting.roterPre}/product/index`
				});
			},

			videoSaveToUrl(file) {
				let imgTypeArr = ['video/mp4'];
				let imgType = imgTypeArr.indexOf(file.type) !== -1;
				if (!imgType) {
					return this.$Message.warning({
						content: '文件  ' + file.name + '  格式不正确, 请选择格式正确的视频',
						duration: 5,
					});
				}
				uploadByPieces({
					randoms: '', // 随机数，这里作为给后端处理分片的标识 根据项目看情况 是否要加
					file: file, // 视频实体
					pieceSize: 3, // 分片大小
					success: (data) => {
						this.formValidate.video_link = data.file_path;
						this.progress = 100;
					},
					error: (e) => {
						this.$Message.error(e.msg);
					},
					uploading: (chunk, allChunk) => {
						this.videoIng = true;
						let st = Math.floor((chunk / allChunk) * 100);
						this.progress = st;
					},
				});
				return false;
			},

			// 上传头部token
			getToken() {
				this.header['Authori-zation'] = 'Bearer ' + util.cookies.get('token');
			},
			// 上传成功
			handleSuccess(res, file, fileList) {
				if (res.status === 200) {
					this.formValidate.video_link = res.data.src;
					this.$Message.success(res.msg);
				} else {
					this.$Message.error(res.msg);
				}
			},
			//获取视频上传类型
			uploadType() {
				uploadType().then((res) => {
					this.upload_type = res.data.upload_type;
				});
			},
			getEditorContent(data) {
				this.content = data;
			},
			infoData(data) {
				let cate_id = data.cate_id.map(Number);
				this.attrs = data.items || [];
				let ids = [];
				data.coupons.map((item) => {
					ids.push(item.id);
				});
				this.goodsData = data.recommend_list;
				if (data.auto_off_time) {
					this.off_show = 1;
				} else {
					this.off_show = 0;
				}
				let brandIds = [];
				data.brand_id.forEach(item => {
					brandIds.push(item.toString())
				})
				this.formValidate = data;
				this.formTypeList = data.custom_form_info;
				this.formValidate.brand_id = brandIds;
				this.formValidate.is_limit = this.formValidate.is_limit ? 1 : 0;
				this.formValidate.limit_type = parseInt(data.limit_type);
				this.contents = data.description;
				this.formValidate.coupon_ids = ids;
				this.updateIds = ids;
				this.updateName = data.coupons;
				this.formValidate.cate_id = cate_id;
				this.storeDataLabel = data.store_label_id;
				this.specsList = data.specs;
				if(data.attr_data == null){
					this.formValidate.attr_data = []
				}
				if(data.size_data == null){
					this.formValidate.size_data = {
						"height":"",
						"long":"",
						"width":"",
						"unit":"cm",
					}
				}else{
					this.formValidate.size_data = data.size_data
				}
				console.log("this.formValidate.size_data:",this.formValidate.size_data)
				if (data.attr) {
					console.log("data.attr:", data.attr)
					this.oneFormValidate = [data.attr];
				}
				console.log("this.oneFormValidate222:", this.oneFormValidate)
				this.formValidate.header = [];
				this.generate(0);
				this.formValidate.system_form_id = data.system_form_id || 0;
				
				if (this.formValidate.system_form_id) {
					this.customBtn = true;
				} else {
					this.customBtn = false;
				}
				this.spec_type = data.spec_type;
				if (data.spec_type === 0) {
					this.manyFormValidate = [];
				} else {
					this.createBnt = true;
					this.oneFormValidate = [{
						pic: '',
						price: 0,
						discount: 0,
						settle_price: 0,
						cost: 0,
						ot_price: 0,
						stock: 0,
						parcel_num: 0,
						bar_code: '',
						code: '',
						weight: 0,
						volume: 0,
						brokerage: 0,
						brokerage_two: 0,
						vip_price: 0,
						parcel_list: [],
					}, ];
				}
				console.log("this.oneFormValidate", this.oneFormValidate)
				this.pid = data.pid;
				console.log("this.manyFormValidate:", this.manyFormValidate);

			},

			checkMove(evt) {
				this.moveIndex = evt.draggedContext.index;
			},
			end() {
				this.moveIndex = '';
			},
			//对象数组去重；
			unique(arr) {
				const res = new Map();
				return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
			},
			// 运费模板
			getList() {
				// this.productGetTemplate();
			},
			// 添加运费模板
			addTemp() {
				this.$refs.templates.isTemplate = true;
			},
			// 删除视频；
			delVideo() {
				let that = this;
				that.$set(that.formValidate, 'video_link', '');
				that.$set(that, 'progress', 0);
				that.videoIng = false;
				that.upload.videoIng = false;
			},
			zh_uploadFile() {
				if (this.seletVideo == 1) {
					if (this.videoLink && this.$getFileType(this.videoLink) == 'video') {
						this.formValidate.video_link = this.videoLink;
					} else {
						return this.$Message.error('请输入正确的视频链接');
					}
				} else {
					this.$refs.refid.click();
				}
			},
			zh_uploadFile_change(evfile) {
				let that = this;
				let suffix = evfile.target.files[0].name.substr(
					evfile.target.files[0].name.indexOf('.')
				);
				if (suffix.indexOf('.mp4') === -1) {
					return that.$Message.error('只能上传MP4文件');
				}
				let types = {
					key: evfile.target.files[0].name,
					contentType: evfile.target.files[0].type,
				};
				productGetTempKeysApi(types)
					.then((res) => {
						that.$videoCloud
							.videoUpload({
								type: res.data.type,
								evfile: evfile,
								res: res,
								uploading(status, progress) {
									that.upload.videoIng = status;
									if (res.status == 200) {
										that.progress = 100;
									}
								},
							})
							.then((res) => {
								that.formValidate.video_link = res.url;
								that.$Message.success('视频上传成功');
								that.upload.videoIng = false;
							})
							.catch((res) => {
								that.$Message.error(res);
							});
					})
					.catch((res) => {
						that.$Message.error(res.msg);
					});
			},
			// 上一页；
			upTab() {
				// if (this.currentTab == 3 && this.formValidate.product_type != 0) {
				//   this.currentTab = (Number(this.currentTab) - 2).toString();
				// } else {
				//   this.currentTab = (Number(this.currentTab) - 1).toString();
				// }
				if (this.currentTab == 3 && this.formValidate.product_type != 0) {
					this.currentTab = (Number(this.currentTab) - 2).toString();
				} else {
					this.currentTab = (Number(this.currentTab) - 1).toString();
				}
			},
			// 下一页；
			downTab(name) {
				// this.$refs[name].validate((valid) => {
				//   if (valid) {
				//     if (
				//       this.formValidate.is_show == 2 &&
				//       !this.formValidate.auto_on_time
				//     ) {
				//       return this.$Message.warning('请填写定时上架时间');
				//     }
				//     if (this.off_show == 1 && !this.formValidate.auto_off_time) {
				//       return this.$Message.warning('请填写定时下架时间');
				//     }
				//     if (this.currentTab == 3 && this.formValidate.product_type != 0) {
				//       this.currentTab = (Number(this.currentTab) + 2).toString();
				//     } else {
				//       this.currentTab = (Number(this.currentTab) + 1).toString();
				//     }
				//   } else {
				//     this.$Message.warning('请完善数据');
				//   }
				// });
				if (this.currentTab == 3 && this.formValidate.product_type != 0) {
					this.currentTab = (Number(this.currentTab) + 2).toString();
				} else {
					this.currentTab = (Number(this.currentTab) + 1).toString();
				}
			},
			// 属性弹窗回调函数；
			userSearchs() {
				this.productGetRule();
			},
			// 添加规则；
			addRule() {
				this.$refs.addattr.modal = true;
			},
			// 批量设置会员价
			vipPriceSetUp() {
				let that = this;
				if (that.manyVipPrice <= 0) {
					return that.$Message.error('请填写会员价在进行批量添加');
				} else {
					for (let val of that.manyFormValidate) {
						this.$set(val, 'vip_price', that.manyVipPrice);
					}
				}
			},
			batchDel() {
				this.oneFormBatch = [{
					attr: 'All',
					pic: '',
					price: 0,
					discount: 0,
					settle_price: 0,
					cost: 0,
					ot_price: 0,
					parcel_num: 0,
					stock: 0,
					bar_code: '',
					code: '',
					weight: 0,
					volume: 0,
					virtualList: [],
					disk_info: '',
				}, ];
				this.activeAtter = [];
				for (let val of this.manyFormValidate) {
					val.select = true;
				}
			},
			confirm() {
				let that = this;
				that.createBnt = true;
				if (that.formValidate.selectRule.trim().length <= 0) {
					return that.$Message.error('请选择属性');
				}
				that.ruleList.forEach(function(item, index) {
					if (item.rule_name === that.formValidate.selectRule) {
						that.attrs = item.rule_value;
					}
				});
			},
			// 获取商品属性模板；
			productGetRule() {
				productGetRuleApi().then((res) => {
					this.ruleList = res.data;
				});
			},
			// 获取运费模板；
			productGetTemplate() {
				productGetTemplateApi().then((res) => {
					this.templateList = res.data;
				});
			},
			// 删除表格中的属性
			delAttrTable(index) {
				let id = this.productId;
				if (id) {
					// checkActivityApi(id)
					//   .then((res) => {
					this.manyFormValidate.splice(index, 1);
					this.$Message.success(res.msg);
					// })
					// .catch((res) => {
					//   this.$Message.error(res.msg);
					// });
				} else {
					this.manyFormValidate.splice(index, 1);
				}
			},
			// 批量添加
			batchAdd() {
				for (let val of this.manyFormValidate) {
					if (val.select) {
						if (this.oneFormBatch[0].pic) {
							this.$set(val, 'pic', this.oneFormBatch[0].pic);
						}
						if (this.oneFormBatch[0].price > 0) {
							this.$set(val, 'price', this.oneFormBatch[0].price);
						}
						if (this.oneFormBatch[0].discount > 0) {
							this.$set(val, "discount", this.oneFormBatch[0].discount);
						}
						if (this.oneFormBatch[0].settle_price > 0) {
							this.$set(val, "settle_price", this.oneFormBatch[0].settle_price);
						}
						if (this.oneFormBatch[0].cost > 0) {
							this.$set(val, 'cost', this.oneFormBatch[0].cost);
						}
						if (this.oneFormBatch[0].ot_price > 0) {
							this.$set(val, 'ot_price', this.oneFormBatch[0].ot_price);
						}
						if (this.oneFormBatch[0].parcel_num > 0) {
							this.$set(val, "parcel_num", this.oneFormBatch[0].parcel_num);
						}
						if (this.oneFormBatch[0].stock > 0) {
							this.$set(val, 'stock', this.oneFormBatch[0].stock);
						}
						if (this.oneFormBatch[0].bar_code !== '') {
							this.$set(val, 'bar_code', this.oneFormBatch[0].bar_code);
						}
						if (this.oneFormBatch[0].code !== '') {
							this.$set(val, 'code', this.oneFormBatch[0].code);
						}
						if (this.oneFormBatch[0].weight > 0) {
							this.$set(val, 'weight', this.oneFormBatch[0].weight);
						}
						if (this.oneFormBatch[0].volume > 0) {
							this.$set(val, 'volume', this.oneFormBatch[0].volume);
						}
						if (this.formValidate.product_type == 1) {
							if (
								this.oneFormBatch[0].virtual_list &&
								this.oneFormBatch[0].virtual_list.length
							) {
								this.$set(val, 'virtual_list', this.oneFormBatch[0].virtual_list);
							} else if (this.oneFormBatch[0].disk_info) {
								this.$refs.addCarMy.cartMyType = 1;
								this.$set(val, 'disk_info', this.oneFormBatch[0].disk_info);
							}
						}
					}
				}
			},
			// 添加按钮
			addBtn() {
				this.clearAttr();
				this.createBnt = false;
				this.showIput = true;
			},
			addmanyData(data) {
				data.forEach((item) => {
					item.select = true;
				});
				this.manyFormValidate = data;
			},
			// 立即生成
			generate(type) {
				generateAttrApi({
							attrs: this.attrs,
							product_type: this.formValidate.product_type
						},
						this.formValidate.id,
						type
					)
					.then((res) => {
						let info = res.data.info,
							header1 = JSON.parse(JSON.stringify(info.header));
						if (this.productId !== '0') {
							this.addmanyData(info.value);
						}
						this.formValidate.header = header1;
						console.log('header', header1)
						this.attrData = res.data.info.attr;
						let header = info.header;
						header.pop();
						this.columnsInstalM = info.header;
						if (!this.productId && this.formValidate.spec_type === 1) {
							this.manyFormValidate.map((item) => {
								item.pic = this.formValidate.slider_image[0];
							});
							this.oneFormBatch[0].pic = this.formValidate.slider_image[0];
						} else if (this.productId) {
							this.manyFormValidate.map((item) => {
								if (!item.pic) {
									item.pic = this.formValidate.slider_image[0];
								}
							});
							this.oneFormBatch[0].pic = this.formValidate.slider_image[0];
						}
						this.getAttr();
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			// 取消
			offAttrName() {
				this.showIput = false;
				this.createBnt = true;
			},
			clearAttr() {
				this.formDynamic.attrsName = '';
				this.formDynamic.attrsVal = '';
			},
			// 删除规格
			handleRemoveRole(index) {
				this.attrs.splice(index, 1);
				this.manyFormValidate.splice(index, 1);
			},
			// 删除属性
			handleRemove2(item, index) {
				item.splice(index, 1);
			},
			// 添加规则名称
			createAttrName() {
				if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
					let data = {
						value: this.formDynamic.attrsName,
						detail: [this.formDynamic.attrsVal],
					};
					this.attrs.push(data);
					var hash = {};
					this.attrs = this.attrs.reduce(function(item, next) {
						/* eslint-disable */
						hash[next.value] ? '' : (hash[next.value] = true && item.push(next));
						return item;
					}, []);
					this.clearAttr();
					this.showIput = false;
					this.createBnt = true;
				} else {
					this.$Message.warning('请添加完整的规格！');
				}
			},
			// 添加属性
			createAttr(num, idx) {
				if (num) {
					this.attrs[idx].detail.push(num);
					var hash = {};
					this.attrs[idx].detail = this.attrs[idx].detail.reduce(function(
							item,
							next
						) {
							/* eslint-disable */
							hash[next] ? '' : (hash[next] = true && item.push(next));
							return item;
						},
						[]);
				} else {
					this.$Message.warning('请添加属性');
				}
			},
			// 商品分类；
			goodsCategory() {
				// cascaderList(1)
				//   .then((res) => {
				//     this.treeSelect = res.data;
				//   })
				//   .catch((res) => {
				//     this.$Message.error(res.msg);
				//   });
				cascaderListApi(1)
					.then((res) => {
						this.treeSelect = res.data.list;
						this.cateData = res.data.list
					})
					.catch((res) => {
						this.$Message.error(res.msg);
					});
			},
			//视视上传类型
			changeVideo(e) {
				this.formValidate.video_link = '';
				this.videoLink = '';
			},
			// 改变规格
			changeSpec() {
				// this.formValidate.is_sub = [];
				// let id = this.productId;
				// if (id) {
				//     checkActivityApi(id)
				//         .then((res) => {})
				//         .catch((res) => {
				//             this.formValidate.spec_type = this.spec_type;
				//             this.$Message.error(res.msg);
				//         });
				// }
			},
			// 详情
			getInfo() {
				let that = this;
				that.spinShow = true;
				productInfoApi(that.productId || this.$route.query.copy)
					.then((res) => {
						let data = res.data.productInfo;
						this.infoData(data);
						this.spinShow = false;
					})
					.catch((res) => {
						this.spinShow = false;
						this.$Message.error(res.msg);
					});
			},
			// tab切换
			onhangeTab(name) {
				this.currentTab = name;
			},
			handleRemove(i) {
				this.images.splice(i, 1);
				this.formValidate.slider_image.splice(i, 1);
				this.oneFormValidate[0].pic = this.formValidate.slider_image[0];
			},
			// 关闭图片上传模态框
			changeCancel(msg) {
				this.modalPic = false;
			},
			// 点击商品图
			modalPicTap(tit, picTit, index) {
				this.modalPic = true;
				this.isChoice = tit === 'dan' ? '单选' : '多选';
				this.picTit = picTit;
				this.tableIndex = index;
			},
			// 获取单张图片信息
			getPic(pc) {
				switch (this.picTit) {
					case 'danFrom':
						this.formValidate.image = pc.att_dir;
						if (!this.productId) {
							if (this.formValidate.spec_type === 0) {
								this.oneFormValidate[0].pic = pc.att_dir;
							} else {
								this.manyFormValidate.map((item) => {
									item.pic = pc.att_dir;
								});
								this.oneFormBatch[0].pic = pc.att_dir;
							}
						}
						break;
					case 'danTable':
						this.oneFormValidate[this.tableIndex].pic = pc.att_dir;
						break;
					case 'duopi':
						this.oneFormBatch[this.tableIndex].pic = pc.att_dir;
						break;
					case 'recommend_image':
						this.formValidate.recommend_image = pc.att_dir;
						break;
					default:
						this.manyFormValidate[this.tableIndex].pic = pc.att_dir;
				}
				this.modalPic = false;
			},
			// 获取多张图信息
			getPicD(pc) {
				this.images = pc;
				this.images.map((item) => {
					this.formValidate.slider_image.push(item.att_dir);
					this.formValidate.slider_image = this.formValidate.slider_image.splice(
						0,
						10
					);
				});
				this.oneFormValidate[0].pic = this.formValidate.slider_image[0];
				this.modalPic = false;
			},
			// 提交
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						if (!this.formValidate.store_name.trim()) {
							return this.$Message.warning('基础信息-商品名称不能为空');
						}
						this.formValidate.type = this.type;
						if (this.formValidate.spec_type === 0) {
							this.formValidate.attrs = this.oneFormValidate;
							this.formValidate.header = [];
							this.formValidate.items = [];
						} else {
							this.formValidate.items = this.attrs;
							this.formValidate.attrs = this.manyFormValidate;
						}
						if (
							this.formValidate.spec_type === 1 &&
							this.manyFormValidate.length === 0
						) {
							return this.$Message.warning('规格库存-请点击生成多规格');
						}
						let item = this.formValidate.attrs;
						this.openSubimit = true;
						this.formValidate.description = this.formatRichText(this.content);
						let goodsId = [];
						this.goodsData.forEach((item) => {
							goodsId.push(item.product_id);
						});
						this.formValidate.recommend_list = goodsId;
						// 商品标签
						let storeActiveIds = [];
						this.storeDataLabel.forEach((item) => {
							storeActiveIds.push(item.id);
						});
						this.formValidate.store_label_id = storeActiveIds;
						// 商品参数
						this.formValidate.specs = this.specsList;
						if (this.$route.query.copy) {
							this.formValidate.id = 0;
							this.formValidate.soure_link = '';
						}
						productAddApi(this.formValidate)
							.then(async (res) => {
								this.openSubimit = false;
								this.$Message.success(res.msg);
								if (this.productId === '0') {
									cacheDelete().catch((err) => {
										this.$Message.error(err.msg);
									});
								}
								this.$emit('saved');
							})
							.catch((res) => {
								this.openSubimit = false;
								this.$Message.error(res.msg);
							});
					} else {
						if (!this.formValidate.store_name) {
							return this.$Message.warning('基础信息-商品名称不能为空');
						} else if (!this.formValidate.cate_id.length) {
							return this.$Message.warning('基础信息-商品分类不能为空');
						} else if (!this.formValidate.unit_name) {
							return this.$Message.warning('基础信息-商品单位不能为空');
						} else if (!this.formValidate.slider_image.length) {
							return this.$Message.warning('基础信息-商品轮播图不能为空');
						}
					}
				});
			},
			changeTemplate(msg) {
				this.template = msg;
			},
			// 表单验证
			validate(prop, status, error) {
				if (status === false) {
					this.$Message.warning(error);
				}
			},
			// 移动
			handleDragStart(e, item) {
				this.dragging = item;
			},
			handleDragEnd(e, item) {
				this.dragging = null;
			},
			handleDragOver(e) {
				e.dataTransfer.dropEffect = 'move';
			},
			handleDragEnter(e, item) {
				e.dataTransfer.effectAllowed = 'move';
				if (item === this.dragging) {
					return;
				}
				const newItems = [...this.formValidate.slider_image];
				const src = newItems.indexOf(this.dragging);
				const dst = newItems.indexOf(item);
				newItems.splice(dst, 0, ...newItems.splice(src, 1));
				this.formValidate.slider_image = newItems;
			},
			// 添加自定义弹窗
			addCustomDialog(editorId) {
				window.UE.registerUI(
					'test-dialog',
					function(editor, uiName) {
						// 创建 dialog
						let dialog = new window.UE.ui.Dialog({
							iframeUrl: '/store/widget.images/index.html?fodder=dialog',
							editor: editor,
							name: uiName,
							title: '上传图片',
							cssRules: 'width:1200px;height:500px;padding:20px;',
						});
						this.dialog = dialog;
						let btn = new window.UE.ui.Button({
							name: 'dialog-button',
							title: '上传图片',
							cssRules: `background-image: url(https://cdn.oss.9gt.net/prov1.1/1/icons.png);background-position: -726px -77px;`,
							onclick: function() {
								// 渲染dialog
								dialog.render();
								dialog.open();
							},
						});
						return btn;
					},
					37
				);
				window.UE.registerUI(
					'video-dialog',
					function(editor, uiName) {
						let dialog = new window.UE.ui.Dialog({
							iframeUrl: '/store/widget.video/index.html?fodder=video',
							editor: editor,
							name: uiName,
							title: '上传视频',
							cssRules: 'width:1000px;height:500px;padding:20px;',
						});
						this.dialog = dialog;
						let btn = new window.UE.ui.Button({
							name: 'video-button',
							title: '上传视频',
							cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -320px -20px;`,
							onclick: function() {
								// 渲染dialog
								dialog.render();
								dialog.open();
							},
						});
						return btn;
					},
					38
				);
			},
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match
						.replace(/style="[^"]+"/gi, '')
						.replace(/style='[^']+'/gi, '');
					match = match
						.replace(/width="[^"]+"/gi, '')
						.replace(/width='[^']+'/gi, '');
					match = match
						.replace(/height="[^"]+"/gi, '')
						.replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(
					/style="[^"]+"/gi,
					function(match, capture) {
						match = match
							.replace(/width:[^;]+;/gi, 'max-width:100%;')
							.replace(/width:[^;]+;/gi, 'max-width:100%;');
						return match;
					}
				);
				// newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(
					/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
				);
				return newContent;
			},
			drawerChange(e) {
				if (e) {
					this.currentTab = '1';
					this.getInfo();
					// this.getReplyList();
				} else {
					this.$emit('update:visible', false);
				}
			},
			getReplyList() {
				this.replyLoading = true;
				this.replyValidate.product_id = this.productId;
				productReplyApi(this.replyValidate)
					.then(async (res) => {
						let data = res.data;
						this.replyData = data.list;
						this.total = res.data.count;
						this.replyLoading = false;
					})
					.catch((res) => {
						this.replyLoading = false;
						this.$Message.error(res.msg);
					});
			},
			// 回复
			reply(row) {
				this.replyModal = true;
				this.rows = row;
			},
			oks() {
				this.replyModal = true;
				this.$refs["replyForm"].validate((valid) => {
					if (valid) {
						setReplyApi(this.replyForm, this.rows.id)
							.then(async (res) => {
								this.$Message.success(res.msg);
								this.replyModal = false;
								this.$refs["replyForm"].resetFields();
								// this.getReplyList();
							})
							.catch((res) => {
								this.$Message.error(res.msg);
							});
					} else {
						return false;
					}
				});
			},
			cancels() {
				this.replyModal = false;
				this.$refs["replyForm"].resetFields();
			},
		},
	};
</script>

<style lang="stylus" scoped>
	.video-style {
		width: 100%;
		height: 100% !important;
		border-radius: 10px;
	}

	.select-add {
		width: 200px;
		margin-left: 6px;
		margin-right: 10px;
	}

	.input-display {
		display: none;
	}

	.width-add {
		width: 200px;
	}

	.custom-input {
		width: 100px;
		margin-right: 10px;
	}

	.asterisk {
		position: relative;

		.asteriskInfo {
			position: absolute;
			color: #ed4014;
			left: 73px;
			top: 8px;

			&.on {
				left: 62px;
			}
		}
	}

	.specsList {
		/deep/.ivu-table-header table {
			border: 0 !important;
		}

		/deep/.ivu-table-header thead tr th {
			padding: 0 !important;
			background-color: #EEEEEE !important;
		}

		/deep/.ivu-table-cell {
			padding: 0 !important;
		}

		/deep/.ivu-table-border th,
		/deep/.ivu-table-border td {
			border-right: unset;
		}

		/deep/.ivu-table td {
			height: 59px;
		}

		&.on {
			width 50% !important;

			/deep/.ivu-table {
				width 100% !important;
			}

			/deep/.ivu-table td {
				height 40px;
				padding 0 !important;
			}

			/deep/.ivu-table-cell {
				padding 0 16px !important;
			}
		}
	}

	.fixed-card {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		box-shadow: 0 -1px 2px rgb(240, 240, 240);

		/deep/ .ivu-card-body {
			padding: 15px 16px 14px !important;
		}

		.ivu-form-item {
			margin-bottom: 0;
		}

		/deep/ .ivu-form-item-content {
			text-align: center;
		}

		.ivu-btn {
			height: 32px;
			padding: 0 20px;
		}
	}

	.seeCatMy {
		color: #2d8cf0;
		cursor: pointer;
	}

	.addCustom_content {
		margin-top: 20px;

		.custom_box {
			margin-bottom: 10px;
		}

		.addfont {
			display: inline-block;
			font-size: 13px;
			font-weight: 400;
			color: #1890FF;
			cursor: pointer;
		}
	}

	.addCustomBox {
		margin-top: 12px;
		font-size: 13px;
		font-weight: 400;
		color: #1890FF;

		.btn {
			cursor: pointer;
			width: max-content;
		}
	}

	.checkAlls /deep/.ivu-checkbox-inner {
		width: 14px;
		height: 14px;
	}

	.checkAlls /deep/.ivu-checkbox-wrapper {
		font-size: 12px;
	}

	.lines {
		border-bottom: 1px dashed #eee;
		margin-bottom: 20px;
	}

	.iosfont {
		font-size: 20px !important;
	}

	.selectOn {
		color: #2d8cf0;
	}

	.ifam {
		width: 344px;
		height: 644px;
		background: url('../../../assets/images/phonebg.png') no-repeat center top;
		background-size: 344px 644px;
		padding: 40px 20px;
		padding-top: 50px;
		margin: 0 auto 0 20px;

		.content {
			height: 560px;
			overflow: hidden;
			scrollbar-width: none;
			/* firefox */
			-ms-overflow-style: none;
			/* IE 10+ */
			overflow-x: hidden;
			overflow-y: auto;
		}

		.content::-webkit-scrollbar {
			display: none;
			/* Chrome Safari */
		}
	}

	.offShow {
		position: absolute;
	}

	.goodsShow /deep/.ivu-radio-group-vertical .ivu-radio-wrapper {
		height: 35px;
		line-height: 35px;
	}

	.videbox {
		width: 60px;
		height: 60px;
		background: rgba(0, 0, 0, 0.02);
		border-radius: 4px;
		border: 1px dashed #DDDDDD;
		line-height: 50px;
		text-align: center;
		color: #898989;
		font-size: 30px;
		font-weight: 400;
		cursor: pointer;
	}

	.brandName {
		/deep/.ivu-cascader {
			display: inline-block;
		}
	}

	.formValidate {
		.addClass {
			color: #1890FF;
			margin-left: 14px;
			padding: 9px 0;
			cursor: pointer;
		}
	}

	.productType {
		width: 120px;
		height: 60px;
		background: #FFFFFF;
		border-radius: 3px;
		border: 1px solid #E7E7E7;
		float: left;
		text-align: center;
		padding-top: 8px;
		position: relative;
		cursor: pointer;
		line-height: 23px;
		margin-right: 12px;

		&.on {
			border-color: #1890FF;
		}

		.name {
			font-size: 14px;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.85);
		}

		.title {
			font-size: 12px;
			font-weight: 400;
			color: #999999;
		}

		.jiao {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 0;
			height: 0;
			border-bottom: 26px solid #1890FF;
			border-left: 26px solid transparent;
		}

		.iconfont {
			position: absolute;
			bottom: -3px;
			right: 1px;
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.labelInput {
		border: 1px solid #dcdee2;
		width: 50%;
		padding: 0 5px;
		border-radius: 5px;
		min-height: 30px;
		cursor: pointer;

		.span {
			color: #c5c8ce;
		}

		.iconxiayi {
			font-size: 12px;
		}
	}

	.labelClass {
		/deep/.ivu-form-item-content {
			line-height: unset;
		}
	}

	.ivu-checkbox-wrapper {
		margin-right: 19px;
	}

	.list-group {
		margin-left: -8px;
	}

	.borderStyle {
		border: 1px solid #ccc;
		padding: 8px;
		border-radius: 4px;
	}

	.drag {
		cursor: move;
	}

	.move-icon {
		width: 30px;
		cursor: move;
		margin-right: 10px;
	}

	.move-icon .icondrag2 {
		font-size: 26px;
		color: #d8d8d8;
	}

	.maxW /deep/.ivu-select-dropdown {
		max-width: 600px;
	}

	#shopp-manager .ivu-table-wrapper {
		border-left: 1px solid #dcdee2;
		border-top: 1px solid #dcdee2;
	}

	.noLeft {
		>>>.ivu-form-item-content {
			margin-left: 0 !important;
		}
	}

	#shopp-manager .ivu-form-item .tips {
		display: inline-bolck;
		font-size: 12px;
		font-weight: 400;
		color: #999999;
		margin-top: 14px;
	}

	.iview-video-style {
		width: 40%;
		height: 180px;
		border-radius: 10px;
		background-color: #707070;
		margin-top: 10px;
		position: relative;
		overflow: hidden;
	}

	.iview-video-style .iconv {
		color: #fff;
		line-height: 180px;
		width: 50px;
		height: 50px;
		display: inherit;
		font-size: 26px;
		position: absolute;
		top: -74px;
		left: 50%;
		margin-left: -25px;
	}

	.iview-video-style .mark {
		position: absolute;
		width: 100%;
		height: 30px;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		text-align: center;
	}

	.uploadVideo {
		margin-left: 10px;
	}

	.submission {
		margin-left: 10px;
	}

	.color-list .tip {
		color: #c9c9c9;
	}

	.color-list .color-item {
		width: 70px;
		height: 28px;
		line-height: 28px;
		color: #fff;
		margin-right: 10px;
		border-radius: 2px;
		text-align: center;

		.num {
			color: #1890FF;
			width: 14px;
			height: 14px;
			text-align: center;
			line-height: 14px;
			border-radius: 50%;
			background-color: #fff;
			margin-right: 6px;
		}
	}

	.color-list .color-item.blue {
		background-color: #1E9FFF;
	}

	.color-list .color-item.yellow {
		background-color: rgb(254, 185, 0);
	}

	.color-list .color-item.green {
		background-color: #009688;
	}

	.color-list .color-item.red {
		background-color: #ed4014;
	}

	.color-list .color-item.colorBlue {
		background: linear-gradient(270deg, #5ECFFF 0%, #0084FF 100%);
	}

	.columnsBox {
		margin-right: 10px;
	}

	.priceBox {
		width: 100%;
	}

	.rulesBox {
		display: flex;
		flex-wrap: wrap;
	}

	.pictrueBox {
		display: inline-block;
	}

	.pictrueTab {
		width: 40px !important;
		height: 40px !important;
	}

	.pictrue {
		width: 60px;
		height: 60px;
		border: 1px dotted rgba(0, 0, 0, 0.1);
		margin-right: 15px;
		margin-bottom: 10px;
		display: inline-block;
		position: relative;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
		}

		.btndel {
			position: absolute;
			z-index: 1;
			width: 20px !important;
			height: 20px !important;
			left: 46px;
			top: -4px;
		}
	}

	.upLoad {
		width: 58px;
		height: 58px;
		line-height: 58px;
		border: 1px dotted rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		background: rgba(0, 0, 0, 0.02);
		cursor: pointer;
	}

	.curs {
		cursor: pointer;
	}

	.inpWith {
		width: 60%;
	}

	.labeltop {
		>>>.ivu-form-item-label {
			float: none !important;
			display: inline-block !important;
			margin-left: 120px !important;
			width: auto !important;
		}

		.icondrop-down {
			font-size: 12px;
			margin-left: 5px;
		}
	}

	.video-icon {
		background-image: url('https://cdn.oss.9gt.net/prov1.1/1/icons.png'); // cdn.oss.9gt.net/prov1.1/1/icons.png);
		// background-color: #fff;
		background-position: -9999px;
		background-repeat: no-repeat;
	}

	.progress {
		margin-top: 10px;
	}

	.new_tab {
		>>>.ivu-tabs-nav .ivu-tabs-tab {
			padding: 4px 16px 20px !important;
			font-weight: 500;
		}
	}

	.header {
		display: flex;
		align-items: center;
		padding: 30px 0 25px 25px;
		font-size: 13px;
		color: #606266;

		.iconfont {
			margin-right: 12px;
			color: #2d8cf0;
		}

		.title {
			font-weight: 500;
			font-size: 16px;
			color: #000000;
		}
	}

	.drawer-main {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 62px;
		left: 0;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.ivu-tabs {
		>>>.ivu-tabs-bar {
			border-bottom: 0;
			margin-bottom: 30px;
			background-color: #F5F7FA;
		}

		>>>.ivu-tabs-tab {
			height: 40px;
			padding: 0 20px;
			font-size: 13px;
			line-height: 40px;
			color: #000000;

			&:hover {
				color: #000000 !important;
			}
		}

		>>>.ivu-tabs-tab-active {
			background-color: #FFFFFF;
		}

		>>>.ivu-tabs-ink-bar {
			top: 0;
			bottom: auto;
		}

		.ivu-tabs-tabpane {
			padding: 0 24px;
		}
	}
</style>